JQuery Validation on Two Forms in different Tabs

Question

I'm having some trouble finding a nice solution for validating two different forms on two tabs. I want both to be valid to post data. I'm using the bootstrap framework for the tabs, and jquery validation.

Here's the example: http://jsfiddle.net/SLsde/

HTML

<div class="container">
<ul class="nav nav-pills" id="tabs">
    <li class="active"><a href="#tab1" data-toggle="pill">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="pill">Tab 2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <form class="form" id="form1">
            <div class="form-group">
                <label>Input 1</label>
                <input id="input1" name="input1" type="text" class="form-control" />
            </div>

            <input id="Submit1" type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>

    <div class="tab-pane" id="tab2">
        <form class="form" id="form2">
            <div class="form-group">
                <label>Input 2</label>
                <input id="input2" name="input2" type="text" class="form-control" />
            </div>

            <input id="Submit2" type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>
</div>
</div>

JS

var form1 = $("#form1").validate({
    ignore: '',
    rules: {
        "input1": "required"
    }
});

var form2 = $("#form2").validate({
    ignore: '',
    rules: {
        "input2": "required"
    }
});

$("#form1").submit(function (e) {
    e.preventDefault();

    if (form1.valid() && form2.valid()) {
        alert("Post Data");
    } else {
        alert("Not Valid");
    }
});

$("#form2").submit(function (e) {
    e.preventDefault();

    if (form1.valid() && form2.valid()) {
        alert("Post Data");
    } else {
        alert("Not Valid");
    }
});

If you try and submit on one tab and with no data on the other it'll still say it's valid. If you submit with it empty then go to other tab to submit it will then say false. I tried using the ignore: '' thing that many suggest, but I couldn't find many examples of a form on each tab.

Any ideas would be helpful.

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Your code:

var form1 = $("#form1").validate({  ...  });

....

if (form1.valid() ...

Quote OP:

"submit on one tab and with no data on the other it'll still say it's valid"

The problem here is that you're attaching .valid() to the form1 variable, which represents the .validate() object.

As per docs, attach .valid() to the selected form like this...

$("#form1").valid()

If you're trying to do a stepped form, there are various approaches.

When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)

Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.

Something like this...

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".

Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.

"Proof of Concept" DEMO: http://jsfiddle.net/N9UpD/

Also, see for reference:

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

"The problem here is that you're attaching .valid() to the form1 variable, which represents the .validate() object. As per docs, attach .valid() to the selected form like this... $("#form1").valid()" - That was it! Face Palm. Thank you so much. — Lee Anderson, Sep 30 '13 at 16:19
@LeeAnderson, you're very welcome. However, I strongly recommend that you reconsider your two `submit` handlers (with `preventDefault`). Although not technically incorrect, it's unnecessarily redundant when the plugin already provides a `submitHandler` callback function for you. — Sparky, Sep 30 '13 at 18:02

JQuery Validation on Two Forms in different Tabs

1 Answers1

Linked