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.

score 47 · Answer 1 · edited May 19 '15 at 08:18

47

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.

edited May 19 '15 at 08:18

pid

11,472
6
34
63

answered Mar 31 '11 at 15:02

Felipe Leusin

19,991
2
26
19

3

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. – akiro Apr 20 '11 at 07:38
This works, except I also need to set things like errorClass, errorElement, etc. Any suggestions there? – Kori Dec 20 '11 at 15:39
7

Where do you call $("#form_selector").data('validator') ?? When I do this no property is returned. – nixon Nov 15 '12 at 04:28
1

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. – Brian MacKay Dec 22 '17 at 22:36

score 40 · Answer 2 · answered Feb 10 '12 at 17:05

40

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:

The validate plugin
Your custom code & options
The unobtrusive plugin

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

answered Feb 10 '12 at 17:05

Chris Barr

29,851
23
95
135

3

Thank you. By far the easiest and most elegant solution. – Mark Nov 17 '12 at 07:50
3

http://aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/3583148-update-jquery-validate-unobtrusive-implementation- – Blake Niemyjski Jan 23 '13 at 23:59
3

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. – Digbyswift May 07 '15 at 13:05
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 – Martin Jun 21 '17 at 13:45

score 10 · Answer 3 · answered Jun 08 '16 at 10:43

10

Right way to do this:

Script order:

The validate plugin
The unobtrusive plugin
Your custom code&options

Custom code&options script:

var settings = {
   //...
}; 

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

answered Jun 08 '16 at 10:43

Anton Khotoolev

101
1
3

2

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 – ctekse Oct 31 '16 at 10:34
1

This is the correct way to do this now with MVC 5 and Bootstrap 4 and JQuery 3.3.1 – OutOFTouch Nov 21 '18 at 23:25

score 1 · Answer 4 · answered Sep 07 '21 at 07:49

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;

score -3 · Answer 5 · edited Nov 04 '14 at 19:49

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.

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

5 Answers5

Linked