回发后的 MVC 3 剃须刀验证

Question

我有一个带有客户信息的表单。有一个下拉菜单，在更改时会使用 JavaScript 在 HTML 中插入新的表单元素。在此事件之后，我得到了用于验证的 JavaScript。

当我发布表单时，我确实将新元素数组放入我的模型中。如果现在我进行服务器验证并且出现错误，我会将所有内容返回到视图，这次使用 razor 生成新元素。到目前为止一切都很好。但是客户端验证不起作用！ 我确实对表单中的其他元素进行了验证，但对之前手动添加的从集合生成的元素没有验证。

我确实看到元素数组没有 data-val 属性。

如果视图一起呈现，包括值数组的循环，为什么我没有在表单的这一部分获得客户端验证？

@{if (Model.pasajeros != null)
      {
          for (int i = 0; i < Model.pasajeros.Count(); i++)
          { 
            <p>Pasajero: @(i + 1)</p>
            <table>
                <tr>
                    <td><span class="lblspan">Nombre</span></td><td><span class="lblspan">Primer Apellido</span></td><td><span class="lblspan">Segundo Apellido</span></td>
                </tr>
                <tr>
                <td>@Html.TextBoxFor(x => x.pasajeros[i].name, new { @class = "txtboxsmall" })<br />@Html.ValidationMessageFor(x => x.pasajeros[i].name)</td>
                <td>@Html.TextBoxFor(x => x.pasajeros[i].lname, new { @class = "txtboxsmall" })<br />@Html.ValidationMessageFor(x => x.pasajeros[i].lname)</td>
                <td>@Html.TextBoxFor(x => x.pasajeros[i].lname2, new { @class = "txtboxsmall" })<br />@Html.ValidationMessageFor(x => x.pasajeros[i].lname2)</td>
                </tr>
                <tr>
                    <td><span class="lblspan">Fecha de Nacimiento (mm/dd/yyyy)</span></td><td style="vertical-align: bottom"><span class="lblspan">Sexo</span></td><td></td>
                </tr>
                <tr>
                    <td>@Html.TextBoxFor(x => x.pasajeros[i].dob, new { @class = "txtboxsmall" })<br />@Html.ValidationMessageFor(x => x.pasajeros[i].dob)</td>
                    <td>@Html.DropDownListFor(x => x.pasajeros[i].sex, Model.sexoItems, new { @class = "ddlsmall" })</td><td></td>
                </tr>

            </table>

        <p>@Html.RadioButtonListFor(x => x.pasajeros[i].radioselect, Model.radioItems) </p>

        <table>
            <tr>
            @if (Model.pasajeros[i].radioselect == "pass")
            {
            <td style="vertical-align: bottom"><span class="lblspan" id="@("numeroA" + i.ToString())">Número de Pasaporte Americano</span><span id="@("numeroR" + i.ToString())" class="statehide">Número de Residencia</span></td>
            }
            else
            {
            <td style="vertical-align: bottom"><span class="statehide" id="@("numeroA" + i.ToString())">Número de Pasaporte Americano</span><span id="@("numeroR" + i.ToString())" class="lblspan">Número de Residencia</span></td>
            }
            <td style="vertical-align: bottom"><span class="lblspan">Fecha de Vencimiento</span></td>
            <td><span class="lblspan">Número de Pasaporte Cubano</span></td><td  style="vertical-align: bottom"><span class="lblspan">Fecha de Vencimiento</span></td>
            </tr>
            <tr>
                @if (Model.pasajeros[i].radioselect == "pass")
                {


                <td>@this.TextBox(x => x.pasajeros[i].numAmericanPassport).Id("numAmericanPassport" + i).Class("txtboxsmall")

                @this.TextBox(x => x.pasajeros[i].numResidencia).Id("numResidencia" + i).Class("statehide").Disabled(true)
                <br /> @Html.ValidationMessageFor(x => x.pasajeros[i].numAmericanPassport) @Html.ValidationMessageFor(x => x.pasajeros[i].numResidencia)</td>
                <td>
                @this.TextBox(x => x.pasajeros[i].expAmericanPassport).Id("expAmericanPassport" + i).Class("txtboxsmall")

                @this.TextBox(x => x.pasajeros[i].expResidencia).Id("expResidencia" + i).Class("statehide").Disabled(true)
                <br /> @Html.ValidationMessageFor(x => x.pasajeros[i].expAmericanPassport) @Html.ValidationMessageFor(x => x.pasajeros[i].expResidencia)</td>
                }
                else
                {
                <td>@this.TextBox(x => x.pasajeros[i].numAmericanPassport).Id("numAmericanPassport" + i).Class("statehide").Disabled(true)

                @this.TextBox(x => x.pasajeros[i].numResidencia).Id("numResidencia" + i).Class("txtboxsmall")
                <br /> @Html.ValidationMessageFor(x => x.pasajeros[i].numAmericanPassport) @Html.ValidationMessageFor(x => x.pasajeros[i].numResidencia)</td>
                <td>
                @this.TextBox(x => x.pasajeros[i].expAmericanPassport).Id("expAmericanPassport" + i).Class("statehide").Disabled(true)

                @this.TextBox(x => x.pasajeros[i].expResidencia).Id("expResidencia" + i).Class("txtboxsmall")
                <br /> @Html.ValidationMessageFor(x => x.pasajeros[i].expAmericanPassport) @Html.ValidationMessageFor(x => x.pasajeros[i].expResidencia)</td>
                }
                <td>@Html.TextBoxFor(x => x.pasajeros[i].numCubanPassport, new { @class = "txtboxsmall" })</td>
                <td>@Html.TextBoxFor(x => x.pasajeros[i].expCubanPassport, new { @class = "txtboxsmall" })</td>
            </tr>
            <tr>
                <td><span class="lblspan">Habilitación</span></td><td><span class="lblspan">Documento</span></td><td colspan="2"></td>
            </tr>
            <tr>
                <td>@Html.TextBoxFor(x => x.pasajeros[i].visa, new { @class = "txtboxsmall" })</td>
                <td colspan="3"><input type="file" name="documents[@i]" /></td>
            </tr>
        </table>
        <hr />
      }
  }

}

这是我的观点

Answer 1

在将新元素添加到 DOM 后，您需要调用 parse 方法，以便将它们注册到不显眼的验证中：

$.validator.unobtrusive.parse('#id_of_the_form_containing_newly_added_inputs');

显然，这些元素必须具有相应的 HTML5 data-* 属性，这些属性指示您要对其应用的验证规则，就像在服务器上添加的输入一样。