Question

This form has inputs with the same name but similar (incremental) ids.

The form should validate if there is a name on person, the age must be mandatory..

Now only the first input is mandatory.

Here is my code:

    <form id="people">
        <div class="section">
            <input id="person1" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age1" name="age" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person2" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age2" name="age" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person3" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age3" name="age" class="age" type="text" placeholder="Age" />
        </div>
        ...
        <input type="submit" id="submit" name="submit" value="Add" />
    </form>
    <script type="text/javascript">
        $(function(){
            $('#people').validate();
            $('#submit').click(function(){
                $('[id^="person"]').each(function(){
                    if ($(this).val().length>0){
                        //alert($(this).val());
                        //alert($(this).parent().find('.age').val());
                        $(this).rules('add', {
                            required: true,
                            minlength: 2,
                            messages: {
                                required: "Specify the person name",
                                minlength: "Minimum of 2 characters"
                            }
                        });
                        $(this).parent().find('.age').rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Must have an age",
                                number: "Specify a valid age"
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>

Answer 1

I don’t have this 100 percent of the way there, but I think there are a couple of issues.. One is that using the submit click as the trigger may be interfering with the separate call to validate the form (i.e. validating twice) and the second is that inputs do not have unique names.

UPDATED:

   <form id="people" method="post">
        <div class="section">
            <input id="person1" name="person1" class="person" type="text" placeholder="First Name" />
            <input id="age1" name="age1" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person2" name="person2" class="person" type="text" placeholder="First Name" />
            <input id="age2" name="age2" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person3" name="person3" class="person" type="text" placeholder="First Name" />
            <input id="age3" name="age3" class="age" type="text" placeholder="Age" />
        </div>
        <input type="submit" id="submit" name="submit" value="Add" />
    </form>


$(function() {
    $('#people').validate();

    $('.person').blur(function() {

        if ($(this).val().length) {

            //alert($(this).val());
            //alert($(this).parent().find('.age').val());
            $(this).rules('add', {
                required: true,
                minlength: 2,
                messages: {
                    required: "Specify the person name",
                    minlength: "Minimum of 2 characters"
                }
            });

            $(this).next('input').rules('add', {
                required: true,
                number: true,
                messages: {
                    required: "Must have an age",
                    number: "Specify a valid age"
                }
            });

        }
    });
});