JQuery unobtrusive validation in .NET MVC 3 - displaying a success checkmark

Question

Using unobtrusive jQuery validation in a .NET MVC project and seems to work fine. Now I am trying to show a green checkmark when the field is validated correctly (on the client side and / or remotely).

Here is an example field declaration:

<div class="clearfix"> @Html.LabelFor(model => model.Address1, "Street") <div class="input"> @Html.TextBoxFor(model => model.Address1, new { @class = "xlarge", @maxlength = "100", @placeholder = "eg 123 Main St" }) <span class="help-message"> @Html.ValidationMessageFor(model => model.Address1) <span class="isaok">Looks great.</span> </span> <span class="help-block">Enter the street.</span> </div> </div> 

What I would like to do is add the class "active" to "span.isaok", which, in turn, has a checkmark for the background image.

I tried using the / unhighlight:

 $.validator.setDefaults({ onkeyup: false, highlight: function (element, errorClass, validClass) { $(element).addClass(errorClass).removeClass(validClass); $(element.form).find("label[for=" + element.id + "]").addClass("error"); $(element).parent().find("span.isaok").removeClass("active"); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass(errorClass).addClass(validClass); $(element.form).find("label[for=" + element.id + "]").removeClass("error"); if ($(element).val().length > 0) { $(element).parent().find("span.isaok").addClass("active"); } } 

});

but it shows a green checkmark for all fields, even if they are empty! (hence obviously wrong)

Then I tried to use the "success" option, but it never works.

What am I missing?

Edit: So, I found this blog post and was able to use the success function, i.e.

 $(function () { var settings = $.data($('form')[0], 'validator').settings; settings.onkeyup = false; settings.onfocusout = function (element) { $(element).valid(); }; var oldErrorFunction = settings.errorPlacement; var oldSuccessFunction = settings.success; settings.errorPlacement = function (error, inputElement) { inputElement.parent().find("span.isaok").removeClass("active"); oldErrorFunction(error, inputElement); }; settings.success = function (label) { var elementId = '#' + label.attr("for"); $(elementId).parent().find("span.isaok").addClass("active"); oldSuccessFunction(label); }; }); 

but now, if the form is invalid, both the error message and the valid label are displayed ...

and the last one disappears as soon as I click anywhere on the page.

Answer 1

This is apparently a problem with jquery.validate.unobtrusive, which interferes with the settings added later in $.validator.setDefault . The trick is to load an unobtrusive script after user settings. See here and vote to fix it here .

Answer 2

In case someone has a similar problem, I finally got this working using an uninfected version of jquery.validate.unobtrusive.js and adding my js to the onError and onSuccess methods. Existing code remains like it. Use the updated version during deployment.

Thanks.

Answer 3

This is not a direct answer to your question. I suggest an alternative approach to this: TwitterBootstrapMVC .

With this library, all you need to write for each entry is:

 @Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Address1) 

What is it. You will have a message with a label, input and verification - everything will take care, without javascript. It generates the proper html tag for you. You just need to make sure that you have the correct standard CSS for classes such as .field-validation-error , .field-validation-valid ...