Question

我有模特人

 [DisplayName("First Name")]
[Required("This field is required")]
public string FirstName { get; set; }

[DisplayName("Last Name")]
[Required("This field is required")]
public string LastName { get; set; }

[UmbracoDisplayLocalised("Title")]
public string Title { get; set; }

[DisplayName("Email")]
[Email("Please enter a valid email")]
[Required("This field is required")]
public string Email { get; set; }

该模型在以下视图中提及。

    <div class="fields" id="event_additional_attendee" style="display:none;">


        <ul>
            <li>
                @Html.TextBoxFor(x => x.Email, new { placeholder = "Email Id" })
                @Html.ValidationMessageFor(x => x.Email, "", new { @class = "required" })
            </li>

            <li>
                @Html.TextBoxFor(x => x.FirstName, new { placeholder = "First Name" })
                @Html.ValidationMessageFor(x => x.FirstName, "", new { @class = "required" })
            </li>
            <li>
                @Html.TextBoxFor(x => x.LastName, new { placeholder = "Last Name" })
                @Html.ValidationMessageFor(x => x.LastName, "", new { @class = "required" })
            </li>
            <li>
                @Html.TextBoxFor(x => x.Title, new { placeholder = "Title" })
                @Html.ValidationMessageFor(x => x.Title, "", new { @class = "required" })
            </li>

        </ul>

    </div>
    <div class="toplink">
        <p><a href="#" id="plus1" onclick="addForms()">+ Add More</a></p>
        <p><a href="#" id="minus1" onclick="removeForms()">- Remove </a></p>
    </div>
</div>

每次单击添加更多链接时，上面提到的DOM结构将使用模型属性重复，该属性由Jquery处理。因此，生成具有相同名称的多个文本框。我想知道如何分别验证（服务器端和客户端）每个文本框。我知道问题是重复，但我找不到更好的解决方案。

Answer 1

jQuery验证规则与每个控件的表单名称一起定义。

在您的情况下，您为新的克隆控件定义了相同的名称，这将触发给定控件名称的匹配规则。

要验证每个文本框，请分别使用element()

以编程方式触发元素验证。

var validator = $( "#myform" ).validate();
validator.element( "#myselect" ); // validate individual

Answer 2

我有相同的代码：

这段代码html：

<div class="grid-4"><div class="form-label"><label>Rooms</label>@Html.DropDownList("Room",  new SelectList(Model.Rooms))</div></div>

这段代码js：

<script type="text/javascript">
$(document).ready(function() {
    $('#Room').change(function(){
        var valueRoomId = $.trim($("#Room").val()).toString();
        $("#ol").empty();
        if(valueRoomId >= "2") {

            for (var i = 2; i <= valueRoomId; i++) {
                $("#ol").append("<div class='grid-4'><div class='form-label'><label></label><h4>Room" + i + "</h4>");

                $("#ol").append("<div class='grid-4'>" +
                    "<div class='formErrorContent' style='color: red;float: right;' " +
                    "data-valmsg-for='Adults_" + i + "' data-valmsg-replace='true'></div>" +
                    "<div class='form-label'><label>Adults</label><select class='required' " +
                    "data-val-required='This field is required.'" +
                    "name='Adults_" + i + "' id='Adults_" + i + "'>" +
                    "<option value=''>---Select Adults---</option>" + "@Html.Raw(adults.ToString())" + "</select></div></div>");

                $("#ol").append("<div class='grid-4 last-grid'>" +
                    "<div class='formErrorContent' style='color: red;float: right;' " +
                    "data-valmsg-for='Childrens_" + i + "' data-valmsg-replace='true'></div>" +
                    "<div class='form-label'><label>Childrens</label><select class='required'" +
                    "data-val-required='This field is required.'" +
                    "name='Childrens_" + i + "' id='Childrens_" + i + "'>" +
                "<option value=''>---Select Childrens---</option>" +
                "@Html.Raw(childrens.ToString())" +
                + "</select></div></div>");
        }
    }
   });
});

Answer 3

通过Visual Studio生成该视图为强类型。然后它将为您自动验证它，假设您提供了该模型。

如何在mvc中处理多个文本框

3 个答案: