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-*属性，这些属性指示要在其上应用的验证规则，与服务器上添加的输入相同。

回发后MVC 3剃刀验证

1 个答案: