Question

Is it possible to get jquery validation to show the validation summary using eager validation?

I’m using MVC 3 (if it matters) and my forms validate when each element loses focus:

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

This shows individual errors on each field, however I also want to show those errors in the validation summary block. However, that validation summary only shows up when the form is submitted, not on lost focus.

I’ve tried hooking into showErrors, however that only gives me the current field error, not the current list of errors.

---

For completeness, here’s 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" })
}

Answer 1

Ok, I think I figured this out.

The issue is actually due to using the unobtrusive validation with MVC 3, since it does the jQuery validation initialization for you. Thus the only way to configure validation is by using form.data("validator").settings. However, trying to set the errorLabelContainer via this method, i.e.:

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

… doesn’t work, because jQuery’s validation only uses this value internally in it’s init() function, to configure a bunch of other settings like containers , etc. I tried emulating what it does, or even calling $("#form").data("validator").init() again after setting the errorLabelContainer, but doing so caused weird behavior and hosed a bunch of other settings.

So I took a different approach. First, I provided a place for MVC to put in the individual error strings 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 callback, I copy those strings in to the validation summary after 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 the validation errors as a list in the summary as the user filled out the fields on the form.