jQuery Validation: Validate form in two parts

Question

I want to validate one form in two part, when I click the btn button then validation is done properly, but when I click btnn it's not working and always validates field1

This is my code

jQuery:

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"

        }
    })

    $('#btn').click(function() {
        $("#form1").valid();
    });
    $("#form1").validate({
        rules: {
            field2: "required"
        },
        messages: {
            field2: "Please specify your name"

        }
    })

    $('#btnn').click(function() {
        $("#form1").valid();
    });
});

HTML

<form id="form1" name="form1"> 
    Field 1: <input name="field1" type="text" />
     Field 2: <input name="field2" type="text" />
</form>

<div>
    <input id="btn" type="button" value="Validate"/>
    <input id="btnn" type="button" value="Validate"/>
</div>

Any suggestions?

Answer 1

By design, you cannot call the .validate() method twice on the same form. The .validate() method is used for initialization and the second instance will always be ignored.

You have two options here:

1. Put part 2 into its own <form> container.

OR

2. Some other trick like showing/hiding the form fields, or using the .rules() method to add/remove rules dynamically depending on which button is clicked. If you're showing/hiding these fields, then declare all rules in the same instance of .validate() and leverage the default behavior of this plugin, which is to ignore all hidden fields.

Since you have not revealed the working concept of your multi-part form, or the purpose of wanting to validate in two parts, I will show you the simplest solution, which is suggestion #1.

jQuery:

$(document).ready(function() {

    $("#form1").validate({ // initialize `form1`
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    });

    $('#btn').click(function() {
        $("#form1").valid();
    });

    $("#form2").validate({ // initialize `form2`
        rules: {
            field2: "required"
        },
        messages: {
            field2: "Please specify your name"
        }
    });

    $('#btnn').click(function() {
        $("#form2").valid();
    });
});

HTML:

<form id="form1" name="form1"> 
    Field 1: <input name="field1" type="text" />
</form>

<form id="form2" name="form2">
    Field 2: <input name="field2" type="text" />
</form>

<div>
    <input id="btn" type="button" value="Validate"/>
    <input id="btnn" type="button" value="Validate"/>
</div>

Here is another answer showing how multi-step forms can be done:

https://stackoverflow.com/a/20481497/594235