Question

79

Jquery validation multiple tabs, validate one at a time?

rated 0 times [ 80] [ 1] / answers: 1 / hits: 49860 / 13 Years ago, wed, april 13, 2011, 12:00:00

I'm new to jQuery and I'm trying to use it and the validation plugin (http://docs.jquery.com/Plugins/Validation) to create a multi-part form with multiple tabs for different sections. Right now I have it where there are multiple tabs and the Next button switches to the next tab.

The problem I'm having is that when I finally submit on the last page, the form validates properly but if there are errors on the other page the user isn't notified, and validation really only happens once submit is clicked.

How would I validate each individually when I click Next? I don't really want to create multiple forms or keep track of hidden fields :S Any suggestions?

Thanks!

<script type=text/javascript>

$(document).ready(function() {

    //....stuff

    //tabs

    var tabs = $(#tabs).tabs();

    $(.nexttab).click(function() {

        //var selected = $(#tabs).tabs(option, selected);

        //$(#tabs).tabs(option, selected, selected + 1);

        $(#tabs).tabs(select, this.hash);

    });



    //use link to submit form instead of button

    $(a[id=submit]).click( function(){

        $(this).parents(form).submit();

    });



    //form validation

    var validator = $(#myForm).validate();    

});

</script>



<form class=cmxform id=myForm method=post action=>

    <div id=tabs>

        <ul>

            <li><a href=#general>General</a></li>

            <li><a href=#tab2></a></li>

        </ul>



        <div id=general>

             ....stuff...

            <p>

                <a class=nexttab navbutton href=#tab2><span>Next</span></a>  

            </p>

        </div>

        <div id=tab2>

            <h2>Tab2</h2>

            <p>

                <a class=nexttab navbutton href=#general><span>Prev</span></a>

                <a class=submit navbutton id=submit href=#><span>Submit</span></a>

            </p>

        </div>

    </div>

</form>

Edit:

@Andrew:

I did some combination of your 2nd example and disabling tabs. Seems to work, aside from having the page refresh re-disable the tabs.

var tabs = $(#tabs).tabs({



    disabled: [1,2,3,4,5],



    select: function(event, ui) {

        var valid = true;

        var current = $(this).tabs(option, selected);

        var panelId = $(#tabs ul a).eq(current).attr(href);



        if(ui.index > current)

        {

            $(panelId).find(input).each(function() {

                //console.log(valid);



                if (!validator.element(this) && valid) {

                    valid = false;

                }

            });



        }



        return valid;

    }   



});

In combination with:

$(.nexttab).click(function() {

    var selected = $(#tabs).tabs(option, selected);

    $(#tabs).tabs(enable, selected+1);

    $(#tabs).tabs(option, selected, selected + 1);

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zachary

Add To Favorites

Follow

Total Points: 175

Total Questions: 89

Total Answers: 108

Location: Fiji

Member since Wed, Jul 14, 2021

3 Years ago

zachary questions

1 Bootstrap 5 - Modal Open on Page Load

Tue, Oct 12, 21, 00:00, 3 Years ago

1 React + TypeScript: How to fix return type 'Element[]' is not a valid JSX element.?

Wed, Jun 9, 21, 00:00, 3 Years ago

1 Encountered Error: Material-UI: capitalize(string) expects a string argument. when using snackbar in React Material-UI

Sat, Jul 18, 20, 00:00, 4 Years ago

1 how to format date in jQuery DataTables

Thu, Jun 18, 20, 00:00, 4 Years ago

1 Node.js unable to import ES6 module

Sat, Jan 25, 20, 00:00, 4 Years ago

View All

answered 13 Years ago jeffn · Accepted Answer

This is possible using the .element(selector) function of validator. What you're going to do is iterate through each element on the active tab and call that function on the input. This will trigger validation on each element in turn, showing the validation message.

$(.nexttab).click(function() {

    var valid = true;

    var i = 0;

    var $inputs = $(this).closest(div).find(input);



    $inputs.each(function() {

        if (!validator.element(this) && valid) {

            valid = false;

        }

    });



    if (valid) {

        $(#tabs).tabs(select, this.hash);

    }

});

Additionally, you'll probably want to run similar code when a user clicks a tab to go to a new set of inputs, instead of clicking next.

Here's a working example: http://jsfiddle.net/c2y6r/

Update: Here's another way you could do it, canceling the select event upon invalid form elements:

var validator = $(#myForm).validate();

var tabs = $(#tabs).tabs({

    select: function(event, ui) {

        var valid = true;

        var current = $(this).tabs(option, selected);

        var panelId = $(#tabs ul a).eq(current).attr(href);



        $(panelId).find(input).each(function() {

            console.log(valid);

            if (!validator.element(this) && valid) {

                valid = false;

            }

        });



        return valid;

    }

});

However, now you have to consider allowing the user to go back when they've entered invalid data into the current page. On the other hand, you get the bonus of keeping all the validation code inside of one function which gets fired if the person clicks a tab or your next link.

Example: http://jsfiddle.net/c2y6r/1/

Update 2, if you want to allow people to navigate backwards through the tab interface:

var tabs = $(#tabs).tabs({

    select: function(event, ui) {

        var valid = true;

        var current = $(this).tabs(option, selected);

        var panelId = $(#tabs ul a).eq(current).attr(href);



        if (ui.index > current) {



            $(panelId).find(input).each(function() {

                console.log(valid);

                if (!validator.element(this) && valid) {

                    valid = false;

                }

            });

        }



        return valid;

    }

});