jQuery Unobtrusive client-side validation of custom attribute

Question

I have created a custom validation attribute which works server-side (after form is posted) but I cannot get the validation to work client-side.

The custom attribut

Answer 1

Add this to your Web.config

<configuration>
  <appSettings>  
   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
</configuration>

Cool then try modifying your rule to use the rule below.

$.validator.unobtrusive.adapters.add("reasonable", ["reasonable"], function (options) {
options.rules["reasonable"] = "#" + options.params.reasonable;
options.messages["reasonable"] = options.message;});

Answer 2

Since I landed here when looking into my issue, I'd like to share that if you're using any 3rd party libraries for controls, such as DevExpress with option embed client libraries, then they may actually re-include the validation scripts, which could lead to your adapter being properly added only to be later lost again. In my case, I had to move my .js file creating the client side unobtrusive validator adapter down below these other offending scripts. I'd also want to either consider dropping my own inclusion of said files, or configuring my 3rd party library not to include them, to prevent such confusion.

Answer 3

I haven't tried it, so I'm not sure, but i think there are 2 places where you may be wrong.

1.rule.ValidationType = "reasonable";
Check your html, find the input and is there an attr data-val-reasonalbe or reasonale

$.each(this.adapters, function () {
            var prefix = "data-val-" + this.name,

in jquery.validate.unobtrusive.js, line 173, you can find this, so it must be a data-val-xxxx

2.in jquery.validate.unobtrusive.js end of file you can find

$(function () {
    $jQval.unobtrusive.parse(document);
});

so, when the page is loaded, all form set validate

This is a difficult thing. If your code is like

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
.....
(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
        $.validator.unobtrusive.adapters.addBool('reasonable');
    })(jQuery);

When you do unobtrusive.parse(document); your valid method reasonable doesn't exist, and adapter doesn't exist exist either, so your form valid doesn't have a rule reasonable

If you change the code to like this

<script src="~/Scripts/jquery.validate.js"></script>
(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
        $.validator.unobtrusive.adapters.addBool('reasonable');
    })(jQuery);
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

the valid method can add, but the $.validator.unobtrusive is undefined

I think you should do more

<script src="~/Scripts/jquery.validate.js"></script>
(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
    })(jQuery);
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

and put the

$.validator.unobtrusive.adapters.addBool('reasonable');

in to jquery.validate.unobtrusive.js, and make sure it runs before

$(function () {
    $jQval.unobtrusive.parse(document);
});

I'm not sure if it will work, maybe I'll try later. Hope this can help you.

update I tried it. In point 2, you can use code

$(function () {
    $("#formid").removeData("unobtrusiveValidation").removeData("validator");
    $.validator.unobtrusive.parse(document);
});

Put this code after your add valid method, this will clear valid setting and parse again with your custom rules

update 2

$("#a").validate({});//first time call is useful
$("#a").validate({});//second time call is useless

also to unobtrusive.parse(...)

jquery.validate.js line 41

var validator = $.data( this[0], "validator" );
if ( validator ) {
    return validator;
}

and jquery.validate.unobtrusive.js line 99

result = $form.data(data_validation),
    ...
    if (!result) { ....

when <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
end of this file, called unobtrusive.parse(document), it will append a data to form. If it called before you setup code, the validate setting is without your setup. you can removeData(...), and run unobtrusive.parse(document) by your code again like

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/setting.js"></script>
<script>
  $(function(){ $("#formid").removeData(...).removeData(...); 
  ....unobtrusive.parse(document)});
</script>

validate plugin use data name "validator" and unobtrusive use data name "unobtrusiveValidation".

I'm really sorry for my poor English, hope you can understand.