Question

我在一个表单中有两个输入区域来捕获主要联系人，然后是其他联系人。主要联系人工作正常，但其他联系人（所有联系人都具有相同的输入名称）仅针对第一次联系进行验证。

HTML ...

<form action="/Book/Register" id="RegistrationForm" method="post">      
    <table>
        <tr><td colspan="2"><h3>Names</h3></td></tr>
        <tr>
            <td width="200">First Name</td>
            <td><input type="text" id="BookingFirstName" name="BookingFirstName" value="" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input type="text" id="BookingLastName" name="BookingLastName" value="" /></td>
        </tr>
        <tr>
            <td>Nickname</td>
            <td><input type="text" name="BookingDisplayName" /></td>
        </tr>
        <tr><td colspan="2"><h3>Contact Details</h3></td></tr>
        <tr>
            <td>Email Address</td>
            <td><input type="text" id="BookingEmailAddress" name="BookingEmailAddress" /></td>
        </tr>
        <tr>
            <td>Re-enter Your Email Address</td>
            <td>
                 <input type="text" id="BookingConfirmEmailAddress" name="BookingConfirmEmailAddress" />
            </td>
        </tr>
        <tr>
            <td>Contact Telephone Number</td>
            <td>
                <input type="text" id="BookingTelephoneNumber" name="BookingTelephoneNumber" /> 
            </td>
        </tr>        
        <tr>
            <td colspan="2"><h3>Where are you from</h3></td>
        </tr>
        <tr>
            <td>Country</td>
            <td>
               <select id="CountryId" name="CountryId">
                   <option selected="selected" value="300">England</option>
                   <option value="301">Scotland</option>
               </select>
            </td>
        </tr>     
    </table>
 </div>

<div id="OtherMemberInputs">

<table class="InformationTable">
   <tr>
       <th class="TitleContent"></th>
       <th class="TitleContent">First name <span style="font-size: smaller;">(required)</span></th>
       <th class="TitleContent">Last name <span style="font-size: smaller;">(required)</span></th>
       <th class="TitleContent">Nick name <span style="font-size: smaller;">(optional)</span></th>

       <th class="TitleContent">Email address <span style="font-size: smaller;">(optional)</span></th>
       <th class="TitleContent"></th>
   </tr>

<tr id="Member_1" >
    <td class="TitleContent">Squad member #2 details</td>
    <td class="InformationContent"><input type="text" name="FirstName" class="memberinput required" value="" /></td>
    <td class="InformationContent"><input type="text" name="LastName" class="memberinput required" value="" /></td>

    <td class="InformationContent"><input type="text" name="DisplayName" value="" /></td>
    <td class="InformationContent"><input type="text" name="EmailAddress" class="email" value="" /></td>
    <td class="InformationContent"><input class="RemoveMember" type="button" id="RemoveMemberButton_1" value="Remove" /></td>
</tr>


<tr id="Member_2" >
    <td class="TitleContent">Squad member #3 details</td>
    <td class="InformationContent"><input type="text" name="FirstName" class="memberinput required" value="" /></td>
    <td class="InformationContent"><inputtype="text" name="LastName" class="memberinput required" value="" /></td>

    <td class="InformationContent"><input type="text" name="DisplayName" value="" /></td>
    <td class="InformationContent"><input type="text" name="EmailAddress" class="email" value="" /></td>
    <td class="InformationContent"><input class="RemoveMember" type="button" id="RemoveMemberButton_2" value="Remove" /></td>
</tr>



 </table>




 </div>





<input type="submit" class="submitBtn black"><span>Continue</span></input>


</form>

JQuery如下......

       jQuery.validator.addMethod("greaterThanZero", function (value, element) {
            return this.optional(element) || (parseFloat(value) >= 0);
        }, "* Amount must be greater than zero or greater");

        // validate signup form on keyup and submit
        $("#RegistrationForm").validate({
            rules: {
                BookingFirstName: { required: true },
                BookingLastName: { required: true },
                BookingEmailAddress: {
                    required: true,
                    email: true
                },
                BookingConfirmEmailAddress: {
                    required: true,
                    email: true,
                    equalTo: "#BookingEmailAddress"
                },
                BookingTelephoneNumber: { required: true },
                FirstName: { required: true },
                LastName: { required: true },
                EmailAddress: { email: true }
            },
            messages: {
                BookingFirstName: { required: "Please enter your firstname" },
                BookingLastName: { required: "Please enter your lastname" },
                BookingEmailAddress: { required: "Please enter a valid email address" },
                BookingConfirmEmailAddress: {
                    required: "Please provide a valid email address",
                    equalTo: "Please enter the same email address as above"
                },

                BookingTelephoneNumber: { required: "Please enter a telephone number" },
                FirstName: { required: "First name is mandatory" },
                LastName: { required: "Last name is mandatory" }

            }
        });

所以有两件事情发生了。第三个联系人没有验证，每次我尝试提交时，第二个联系人都会显示额外的验证消息（不更正错误）。

有什么建议吗？

Answer 1

第2和第3个成员具有相同的名称属性。为它们指定不同的名称，以便验证规则将它们视为单独的字段，例如

<td class="TitleContent">Squad member #2 details</td>
    <td class="InformationContent"><input type="text" name="FirstName1" class="memberinput required" value="" /></td>

...

 <td class="TitleContent">Squad member #3 details</td>
    <td class="InformationContent"><input type="text" name="FirstName2" class="memberinput required" value="" /></td>

此外，您还必须添加额外的规则和消息：

FirstName1: { required: true },
FirstName2: { required: true },

...

FirstName1: { required: "Member 2's First name is mandatory" },
FirstName2: { required: "Member 3's First name is mandatory" },

等

Answer 2

使用gridview我也遇到同样的问题。我找到了像这样使用网格迭代的答案

$('#form1').validate({
            rules: {
            <%
            foreach(GridViewRow gvr in GridView1.Rows){ %>
                <%=((TextBox)gvr.FindControl("txtQuantity")).UniqueID %>: {
                    required: true
                },
                <%} %>
            },
            messages: {
               <%
            foreach(GridViewRow gvr in GridView1.Rows){ %>
                <%=((TextBox)gvr.FindControl("txtQuantity")).UniqueID %>: {
                    required: "Please enter Issued Quantity."
                },
                <%} %>
            }
        });

JQuery验证仅验证第一个输入

2 个答案: