CODEWITHSUNDEEP
jqueryjquery-validate
Mr. Tomar
Mr. Tomar

Reputation: 365

jQuery Validation: Validate form in two parts

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?

Upvotes: 0

Views: 2479

Answers (2)

SAMsan
SAMsan

Reputation: 26

Previous answers do not mention a solution for validating a single form. The accepted solution provides a workaround adding multiple forms. Although an option does exist without adding tags to your code.

1 - Store the validator object by calling : let validator = $('#myform').validate({...});

2 - Call the validator.element('#myelement'); to validate a single element. This way, you can validate multiple sets of element into a single form.

let validator = $('#myform').validate({...});
let numValid= 0;
 $('#myform .myfields').each( (i, el) =>{
    if ( validator.element( $(el) ) ) {
        numValid ++;                
        if ( numValid === fields.length ){
            // all fields are valids
        }
    } 
})

Upvotes: 0

Sparky
Sparky

Reputation: 98738

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

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

Upvotes: 1

Related Questions