Проверка JQuery проверяет только первый ввод

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" }

            }
        });

Так ДВА вещи случаются. 3-й контакт не проверяется, и у 2-го контакта появляется дополнительное сообщение о проверке каждый раз, когда я пытаюсь отправить (без исправления ошибки).

Есть предложения?

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.Я нашел ответ, используя Grid итерации, как это

$('#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."
                },
                <%} %>
            }
        });