JQuery validation is only validating the first input

I have two input areas in one form to capture the main contact and then additional contacts. The main contact is working fine but the additional contacts (which all have the same input names) is only validating against the first contact.

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开发者_JAVA技巧 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>

The JQuery is as follows...

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

            }
        });

So TWO things happen. The 3rd contact is not validating and the 2nd contact has an extra validation message appear everytime I try to submit (without correcting the error).

Any suggestions?

You have the same name attribute for the 2nd and 3rd members. Give them different names so the validation rules treat them as separate fields, e.g.

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

And also you'd then have to add in extra rules and messages as well:

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

...

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

etc

I also have the same problem using gridview. I found answer using Grid iteration like this

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