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.

Verlaverlee

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.

Backbreaker

Worked great, thanks! Was pulling my hair out trying to figure out why the mvc3 version of validation doesnt understand customisations like the normal jquery validation. – Cameroncameroon

This works, except I also need to set things like errorClass, errorElement, etc. Any suggestions there? – Verlaverlee

Where do you call $("#form_selector").data('validator') ?? When I do this no property is returned. – Sparoid

Just a note that this no longer works, as of jquery.unobtrusive 3.2.6 ... This should not be wrapped in a jQuery function. Anton's answer seems to be the most correct today. – Karat

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!

Ulcer

Thank you. By far the easiest and most elegant solution. – Bustamante

aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/… – Broek

Why is this not the accepted answer?! I've battled with this for months and months on various legacy projects and came across this by chance. It makes so much sense now. Thank you. – Poppy

This unobtrusive will wipe your options out, so use the accepted solution. Don't know if this is a change in the last 5 years, so may have worked previously – Quade

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;

Boxthorn

Thanks! Indeed, this is the right way to do it, when you need to overwrite these settings: errorClass, errorElement and want to extend these functions: errorPlacement, invalidHandler and success. For all the other options you should use the solution presented by @ChrisBarr – Insomniac

This is the correct way to do this now with MVC 5 and Bootstrap 4 and JQuery 3.3.1 – Vicarage

Answer 4

I use this code for my Custom Settings:

    const validationCustomSettings = {
        validClass: "is-valid",
        errorClass: "is-invalid",
    };
    jQuery.validator.setDefaults(validationCustomSettings);
    jQuery.validator.unobtrusive.options = validationCustomSettings;

Rabblerouser

Answer 5

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.

Eyelet