Note that there are some explanatory texts on larger screens.

plurals
  1. POUnobtrusive Validation when multiple controls have the same Name
    primarykey
    data
    text
    <p>I am having a problem with unobtrusive validation because I have a collection of controls and all have the same <strong>name</strong>. I would appreciate any input and will consider and entirely different approach</p> <p>My controls need the same name because they bind with a collection in the model and MVC4 uses control names for this (this is working). Unobtrusive validation finds the control based on the name so it’s always finding the last one.</p> <p>Here are all the details:</p> <p>I have a collection of Strings in my model.</p> <pre><code>public List&lt;String&gt; Signatures { get; set; } </code></pre> <p>The strings are bound to a collection of textBoxes in the view. The number of textBoxes is based on a selection from a radio button. If they choose 0 none are shown, choose 1 and one is shown, 2 and I show 2, up to a max of three.</p> <p>I just put 3 textBoxes in the view and use client side jQuery to show or hide based on the radio button selected.</p> <p>In the view, each textbox is an html Helper class bound with the model. Here is an example with two textboxes. (I add the validation span manually under each)</p> <pre><code>@Html.TextBoxFor(m =&gt; m.Signatures, new { @class = " firstSigLabel " }) &lt;span class="field-validation-valid" data-valmsg-for="Signatures" data-valmsg-replace="true"&gt;&lt;/span&gt; @Html.TextBoxFor(m =&gt; m.Signatures, new { @class = " secondSigLabel}) &lt;span class="field-validation-valid" data-valmsg-for="Signatures" data-valmsg-replace="true"&gt;&lt;/span&gt; </code></pre> <p>When save is clicked the action method correctly binds the two textBoxes with the Signatures collection.</p> <p>Now I need to add validation, which depends on the textBoxes that I am actually showing (the number from the radio button). I want the client side to work the same as it would if I just let MVC handle it (unobtrusive validation). We have a library that depends on this for some common tasks (like showing an indicator).</p> <p>When I show a text box, I use jQuery to add the attributes needed for unobtrusive validation (and remove them when I hide it). That way, if it is shown it is required and if it is hidden it is not required. Here are the inputs once they are visible:</p> <pre><code>&lt;input id="Signatures" class=" firstSigLabel" type="text" value="" name="Signatures" data-val-required="Enter a first Signature Label." data-val="true"&gt;&lt;/input&gt; &lt;input id="Signatures" class=" secondSigLabel" type="text" value="" name="Signatures" data-val-required="Enter a second Signature Label." data-val="true"&gt;&lt;/input&gt; </code></pre> <p>I also re-register the from with unobtrusive validation:</p> <pre><code>$(theForm).removeData('validator'); $.validator.unobtrusive.parse($(theForm)); </code></pre> <p>My problem is that unobtrusive validation uses the <strong>'data-valmsg-for'</strong> attribute in the SPAN, to find the element by <strong>name</strong>. However, I have two inputs with that name and it’s always finding the last one.</p> <p>I have tried changing the ID (Signatures1, Signatures2) but that does nothing.</p> <p>I cannot figure out how to change the name in the html helper, but if I do it will break the model binding in the controller.</p> <p>I know this is not simple – it is really obtrusive validation. I don’t know how to accomplish this with annotations since it is dependent on client side actions.</p> <p>I assume if I used ValidationMessageFor on three textboxes, bound to the same model property, I would still get this problem.</p> <p>Is there a way to overcome this?</p> <p>Am I missing something?</p> <p>Can you think of a better approach?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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