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

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

.....
(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

(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
        $.validator.unobtrusive.adapters.addBool('reasonable');
    })(jQuery);

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

I think you should do more

(function ($) {
        $.validator.addMethod('reasonable', function (value, element, params) {
            return value != '';
        }, 'Clientside Should Not Postback');
    })(jQuery);

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
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

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

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