CODEWITHSUNDEEP
jquery-validatejquery-tabs
spytek
spytek

Reputation: 79

jquery validate when changing tab without submit

I have a form with 4 tabs and I want to be able to validate the current tab before it switches to the new tab when the user clicks on any other tab. This is what I have so far:

$("#tabs").tabs({
            beforeActivate: function(event, ui) {

                var tab = ui.oldTab.index();
                var valid = true;

                if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {

                    valid = false;
                };


                if (!valid) {
                    //alert('not valid');

                    event.preventDefault();
                }
                else {
                    alert('valid');
                }
            }
        });

The above function prevents the user from selecting a different tab if some fields are not filled in. I also have validate function setup as follows:

$("#form1").validate({

            rules: {

                txbYPSchool: { required: true, nowhitespace: true },
                txbYPSubjectDesc: { required: true, nowhitespace: true }

            },

            messages: {

                txbYPSchool: "*This field is mandatory. If not in school, type 'Not in School'",  
                txbYPSubjectDesc: "*This field is mandatory"

            },

            ignore: ""
        });

How can I get the validation to run and display the error messages when a user tries to change tabs when there are incomplete fields still on the present tab? I want to be able to do this without a button click and only when a user tries to change tabs but I dont know how to incorporate the validation function into the first function.

Am using jquery 1.9.1 and the latest validation plugin.

Thanks

Upvotes: 0

Views: 2317

Answers (1)

Sparky
Sparky

Reputation: 98758

You can possibly use the plugin's .valid() method.

Replace this...

if (!valid) {

with this...

if !($("#form1").valid()) {

Then since the plugin is checking validity, you can get rid of all this...

var valid = true;
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {
   valid = false;
};

Upvotes: 1

Related Questions