Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Ok, I think I figured this out. </p> <p>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 <code>form.data("validator").settings</code>. However, trying to set the <code>errorLabelContainer</code> via this method, i.e.:</p> <pre><code>$("#form").data("validator").settings.errorLabelContainer = "#messageBox"; </code></pre> <p>... 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 <code>$("#form").data("validator").init()</code> again after setting the <code>errorLabelContainer</code>, but doing so caused weird behavior and hosed a bunch of other settings.</p> <p>So I took a different approach. First, I provided a place for MVC to put in the individual error strings using <code>@Html.ValidationMessageFor()</code>, and adding <code>display:none</code> to keep it hidden:</p> <pre><code>@using (Ajax.BeginForm(...)) { &lt;div class="field-panel"&gt; @Html.EditorFor(m =&gt; m.PatientID) @Html.ValidationMessageFor(m =&gt; m.PatientID, null, new { style = "display:none"}) ... &lt;/div&gt; &lt;input type="submit" class="carecon-button-next" value="Next" /&gt; &lt;ul id="error-summary"&gt; &lt;/ul&gt; } </code></pre> <p>Then, in the <code>showErrors</code> callback, I copy those strings in to the validation summary <strong>after</strong> calling <code>defaultShowErrors()</code>:</p> <pre><code> $("#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("&lt;li&gt;"); }; </code></pre> <p>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.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload