Geek Answers Handbook

JQuery Validation - show validation summary during validation validation?

Is it possible to get jquery confirmation to show a validation summary using robust validation?

I use MVC 3 (if that matters) and my forms check when each element loses focus:

$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } };

This shows individual errors in each field, however I also want to show these errors in the validation summary block. However, this verification summary appears only when the form is submitted, and not on the lost focus.

I tried connecting to showErrors, but that only gives me the current field error, not the current error list.

For completeness, here is the form code:

 @using (Ajax.BeginForm(...)) { <div class="field-panel"> @Html.EditorFor(m => m.PatientID) ... </div> <input type="submit" class="carecon-button-next" value="Next" /> @Html.ValidationSummary(null, new { @class = "validation-summary" }) }
+7
source share
3 answers

Ok, I think I figured it out.

The problem is with using unobtrusive validation with MVC 3, as it initializes the jQuery validation. Thus, the only way to configure validation is to use form.data("validator").settings . However, trying to set errorLabelContainer using this method, that is:

 $("#form").data("validator").settings.errorLabelContainer = "#messageBox";

... does not work, since jQuery validation uses this value internally inside the init () function to configure a set of other parameters, such as containers, etc. I tried to mimic what it was doing, or even called $("#form").data("validator").init() again after setting errorLabelContainer , but this caused strange behavior and caused a lot of other settings.

So, I took a different approach. First, I provided an MVC space for entering individual error lines using @Html.ValidationMessageFor() and adding display:none to keep it hidden:

 @using (Ajax.BeginForm(...)) { <div class="field-panel"> @Html.EditorFor(m => m.PatientID) @Html.ValidationMessageFor(m => m.PatientID, null, new { style = "display:none"}) ... </div> <input type="submit" class="carecon-button-next" value="Next" /> <ul id="error-summary"> </ul> }

Then in the showErrors I will showErrors these lines into the check summary after by calling defaultShowErrors() :

  $("#form").data("validator").settings.onfocusout = function (element) { $(element).valid(); }; $("#form").data("validator").settings.showErrors = function (errorMap, errorList) { this.defaultShowErrors(); $("#error-summary").empty(); $(".field-validation-error span", $("#form")) .clone() .appendTo("#error-summary") .wrap("<li>"); };

This gave me the behavior I wanted, showing / hiding validation errors as a list in the summary as the user filled in the fields on the form.

+7
source

I had similar problems and written this, this seems like an easy way to get the behavior you are looking for:

 function EnableEagerValidation(){ var itemsNeedingValidation = $('*[data-val="true"]'); itemsNeedingValidation.each(function () { $(this).blur(function(){$(this).closest("form").valid();}); }); }
+2
source

This is from the demo page; invalidHandler and code to create a summary of errors. But this called on the form submit, which was not requested.

 invalidHandler: function(e, validator) { var errors = validator.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields. They have been highlighted below'; $("div.error span").html(message); $("div.error").show(); } else { $("div.error").hide(); } },

However, the errorLabelContainer: method errorLabelContainer: not require submitting a form . According to the documentation "All error labels are displayed inside an unordered list with the messageBox identifier, as indicated by the selector passed as the errorContainer option. All error elements are wrapped inside the li element to create a message list."

 errorLabelContainer: "#messageBox",

Here is a rough demo showing validation with onfocusout . There is no submit button to confirm this item. #messageBox accumulates all messages as they are collected.

http://jsfiddle.net/sparky672/bAN2Q/

+1
source

More articles:


All Articles