-1

I've been attempting to implement a ASP.NET MVC custom validation method. Tutorials I've used such as codeproject explain that you add data-val-customname to the element. Then jQuery.validate.unobtrusive.js then uses the third segment of the attribute

data-val-<customname>

as the name of the rule, as shown below.

$.validator.addMethod('customname', function(value, element, param) {
    //... return true or false
});

However I just can't get the customname method to fire. By playing around I have been able to get the below code to work, but according to all the sources I've read Unobtrusive validation should not work like this.

$.validator.addMethod('data-val-customname', function(value, element, param) {
    //... return true or false
});

I've posted an example of both methods jsfiddle example

Any help would be much appreciated

I've updated my question hopefully to make clearer.

John Hornsby
  • 1
  • 3
  • You misunderstanding the use of `data-val-` attributes. They are read by `jquery.validate.unobtrusive.js` to add the rules for an element, which you not currently doing. See the [updated fiddle](https://jsfiddle.net/2hk3kqzk/14/) for how to add the rules for an element –  Sep 05 '17 at 03:15
  • Thank you for your reply, I was perhaps under the impression that adding an adaptor performed an optional remapping of params added as attributes to the element so the rules could access the data they needed. The thing is however in the [updated fiddle](https://jsfiddle.net/2hk3kqzk/14/) both custom validation methods still don't fire despite adding the adaptors to `jquery.validate.unobtrusive.js`. – John Hornsby Sep 05 '17 at 06:07
  • Sorry, I do not understand what your mean. If you leave the textbox empty and click the button the message defined by `data-val-one` is displayed, and if you then enter a value you get the message defined by `data-val-two` which is exactly what is supposed to happen. What are you expecting? –  Sep 05 '17 at 22:50
  • I thought I was going mad, I've discovered this is only happening on Chrome Canary version 62 and 63 on Windows 10, if checked on Firefox and Edge and this works. Thank you so much for your help – John Hornsby Sep 06 '17 at 09:58
  • The failure of adding a custom method using data-val- appear to just not be working under my limited testing in Chrome Canary Windows 10 Version 63.0.3206.0 (Official Build) canary (64-bit). This also failed to work on OS X Chrome Canary Version 62. However is now working now I've updated to 63.0.3207.0 on OS X. – John Hornsby Sep 06 '17 at 10:33
  • Update to this, Stephen's updated jsfiddle works for me on Mac an PC under Version 63.0.3207.0 (Official Build) canary (64-bit) – John Hornsby Sep 07 '17 at 08:44

1 Answers1

0

I have finally found got there in the end, but still feels like too much hard work and therefore I've probably got something wrong. Initial I was scuppered by a bug in Chrome Canary 62 which refused to allow the adding of a custom method.

My next issue was having to load jQuery, jQuery.validate and jQuery.validate.unobtrusive in the markup and then isolate javascript implementation in a ES6 class. I didn't want to add my adaptors before $().ready() because of my class structure and loading of the app file independent of jQuery. So I had to force $.validator.unobtrusive.parse(document);.

Despite this I was still having issues and finally debugged the source code and found that an existing validator information that is attached to the form was not merging with the updated parsed rules, and essentially ignoring any new adaptors added.

My final work around and admit feels like I've done too much, was to destroy the initial validation information before my forced re-parse.

Here is the working jsfiddle demo

Here is some simplified code

onJQueryReady() {
    let formValidator = $.data(document.querySelector('form'), "validator" );
    formValidator.destroy();

    $.validator.unobtrusive.adapters.add("telephone", [], function (options) {
        options.rules['telephone'] = {};
        options.messages['telephone'] = options.message;
    });

    $.validator.unobtrusive.parse(document);

    $.validator.addMethod("telephone", this.handleValidateTelephoneNumber);
}
John Hornsby
  • 1
  • 3