ASP .Net MVC 3: Custom unobtrusive validation

Question

I am trying to add a custom unobtrusive validation to my app. It does not seem to run the validation.

Here is my Attribute class:

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
    ModelMetadata metadata, ControllerContext context)
{
    yield return new ModelClientValidationRule
    {
        ErrorMessage = ErrorMessage,
        ValidationType = "custrequired"
    };
}

And my JavaScript:

$.validator.addMethod('custrequired', function(value, element, param) {
  return value && value !== '99:99' && value !== '9:99';
});

$.validator.unobtrusive.adapters.add('custrequired', null, function(options) {
  return options.messages['custrequired'] = options.message;
});

JimmiTh · Accepted Answer · 2012-02-12T17:58:19.177

There are plenty of things that can go wrong here, none involving the code you've posted:

How does your generated HTML for the <input> look? Does it include the data-val-custrequired attribute?
If not, did you remember to add the interface in the class declaration - IClientValidatable?
Did you remember to not add your custom validator inside a DOM ready handler? (i.e. don't use $(document).ready() or $(function() { ... })) - the validation should be set up before the document is ready.

ETA: The reason for the last one is that jquery.validate.unobtrusive does this:

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

I.e., it parses the document for validation attributes, rules etc. on document ready. Since that script has to be loaded in order to register your adapters, your registration script would normally have to come after jquery.validate.unobtrusive.js. But that also makes any .ready handler you register be called after the "unobtrusive" one - by which point it's too late. I guess you could put your registration script before and then use .ready. Never tried it, and I've never seen it done.

Also, in this case, this should be enough to register the adapter:

$.validator.addMethod('custrequired', function(value, element, param) {
   return value && value !== '99:99' && value !== '9:99';
});

jQuery.validator.unobtrusive.adapters.addBool('custrequired');

It will still add any custom error message you may have, but since your validator isn't using additional parameters (like e.g. StringLength passes MaximumLength etc.), there's no need for a custom adapter.

I was adding validators in `$(function() { ... })` ... can i know the reason why this doesn't work? — Moon, Feb 12 '12 at 17:21
In my case it wasn't working because I had the code inside `$(document.ready()`. Awesome answer! Helped a lot... — Leniel Maccaferri, Jun 29 '12 at 18:36
+1 for saving me. Lots of solutions, either on SO or the web, but none mentioned not to add the custom validator inside a DOM ready handler. — dan radu, Feb 01 '13 at 05:57
if you really want to have your validators set-up within `$(function(){...})` you can just re-parse at the end of the method `$jQval.unobtrusive.parse(document);` — Simon_Weaver, Feb 21 '13 at 22:26

score 3 · Answer 2 · answered Feb 12 '12 at 03:10

There are a few problems with the $.validator.unobtrusive.adapters.add call:

$.validator.unobtrusive.adapters.add('custrequired', function (options) {
// -------------------------------------------------^ <-- removed "null" param
    options.messages['custrequired'] = options.message;
    // Register the rule properly
    options.rules['custrequired'] = options.params;
    // Don't return anything
});

After those two changes (and making sure ClientValidation and UnobtrusiveJavascript were enabled in the web.config), things worked fine.

Thanks a lot for the response. But still can't get it to work. — Moon, Feb 12 '12 at 06:33

score 0 · Answer 3 · answered Jun 12 '15 at 13:27

You have to change the server side.

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
    ModelMetadata metadata, ControllerContext context)
    {
      //I changed ErrorMessage for ErrorMessageString
      yield return new ModelClientValidationRule
      {
        ErrorMessage = ErrorMessageString,
        ValidationType = "custrequired"
      };
   }

And also as Andre Whitaker said you have to put this for add your validation to the clien side.

    //i changed param for params
    $.validator.addMethod('custrequired', function(value, element, params) {
       return value && value !== '99:99' && value !== '9:99';
    });

    //i specified that there isn't paramaters using an empty array.
    $.validator.unobtrusive.adapters.add('custrequired', [] , function (options) {
        options.messages['custrequired'] = options.message;
        options.rules['custrequired'] = options.params;
    });

REMEMBER TO CHECK THE HTML OF THE INPUT, IT SHOULD HAVE THE "data-" ATTRIBUTE WITH YOUR ERROR MESSAGE TEXT

I hope it works for you.

score 0 · Answer 4 · answered May 01 '21 at 11:03

0

After some research I found a good solution for custom unobtrusive and server side validation in Asp.Net Mvc. Check the below link

Raymund Macaalay

answered May 01 '21 at 11:03

Biju Kalanjoor

532
1
6
12

ASP .Net MVC 3: Custom unobtrusive validation

4 Answers4

Linked