How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

Question

The default validation in MVC 3 is based on jQuery Validation , which I can usually customize with something like:

$.validator.setDefaults({
  submitHandler: function() { alert('submitHandler'); },
  errorPlacement: function(error, element) {
    // do something important here
    alert('errorPlacement');
  },
  errorClass: "error",
  errorElement: "input",
  onkeyup: false,
  onclick: false
})

But, that doesn't seem to work in MVC 3. Specifically, errorPlacement doesn't ever seem to be called and I've no idea why. I'll get the submitHandler called, but never errorPlacement.

How can I customize the validation to match whatever structure/style that I require for my site's style? The default is great, but it doesn't always work in every situation.

Answer 1

In my code instead of using $.validator.setDefaults I access the form validator using $("#form_selector").data('validator') and then change the settings.

$(function () {

    var validator = $("#form_selector").data('validator');
    validator.settings.errorPlacement = function(error,element) {
        alert('errorPlacement');
    };

});

See if it works for you.

Answer 2

I had the same issue, but realized that the Unobtrusive plugin was actually casuing the issue, it will override any options you set! The trick is to have your code written/included in the following order:

1. The validate plugin
2. Your custom code & options
3. The unobtrusive plugin

Any other order and this won't be set correctly!

Answer 3

Right way to do this:

Script order:

1. The validate plugin
2. The unobtrusive plugin
3. Your custom code&options

Custom code&options script:

var settings = {
   //...
}; 

// override jQuery unobtrusive validator settings
$.validator.unobtrusive.options = settings;

Answer 4

All I did for this just duplicated my style to match for the elements that Unobtrusive validator adds.

@Html.ValidationMessageFor(x => x.EmailAddress, "", new { @class = "field-error" })

When validation error occurs "ValidationMessageFor" adds a class "field-validation-error" like below.

<span class="field-error field-validation-error" data-valmsg-for="EmailAddress" data-valmsg-replace="true"><span for="EmailAddress" generated="true" class="">Email address is Required.</span></span>

So i duplicated my style like

.field-error.***field-validation-error*** {position:relative;color:#fff;background:#589BC9;}

I thought this is the simple way to fix this.