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;
});

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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