Question

33

How can I use jQuery.validate without submitting the form?

rated 0 times [ 37] [ 4] / answers: 1 / hits: 40483 / 12 Years ago, thu, august 23, 2012, 12:00:00

I have read several of the other posts about this and still no go. Trying to keep it real simple. I need to validate sections of a form that are being hidden/shown in a jQuery accordion before final submit. I have been using jquery.validate.js for a long time and as long as I validate on submit all is good, but now when I try to validate on button click it is not working.

    <script type=text/javascript>

jQuery().ready(function(){

    var demo = $(.demo).accordion({

        header: '.header',

        event: false

    });



    var nextButtons = $([]);

    $(h3.header, demo).each(function(index) {

        nextButtons = nextButtons.add($(this)

        .next()

        .children(:button)

        .filter(.next, .previous)

        .click(function() {

            demo.accordion(activate, index + ($(this).is(.next) ? 1 : -1))

        }));

    });



});

</script>

<script type=text/javascript>



$(.next).click(function(){

$(#test).validate({              

     rules: {

                     name: required, // simple rule, converted to {required:true}

                     email: {// compound rule

                         required: true,

                         email: true

                     },

                     comment: {

                         required: true

                     }

                 },

                 message: {

                     comment: Please enter a comment.

                 }

             });





});

</script>

    <div class=demo>

<form action=# method=post id=test>

  <fieldset>

<div id=accordion>

    <h3 class=header><a href=#>Section 1</a></h3>

    <div class=sec1>

    <label for=name>Name:</label>

    <input type=text id=name placeholder=Enter your 

full name class=required />

<input type=button class=next value=NEXT />

    </div>

    <h3 class=header><a href=#>Section 2</a></h3>

    <div class=sec2>

    <label for=email>Email:</label>

    <input type=email id=email placeholder=Enter 

your email address class=required />

<input type=button class=next value=NEXT />

<input type=button class=previous value=Previous/>

    </div>

    <h3 class=header><a href=#>Section 3</a></h3>

    <div class=sec3>

    <label for=message>Message:</label>

    <textarea id=message placeholder=What's on your 

mind? class=required></textarea>

    <input type=submit value=Send message />

    <input type=button class=previous value=Previous/>

    </div>

      </fieldset>

</form>



</div>

</div><!-- End demo -->

Answers

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

terrence

Add To Favorites

Follow

Total Points: 120

Total Questions: 115

Total Answers: 87

Location: England

Member since Fri, May 22, 2020

4 Years ago

answered 12 Years ago trayvon · Accepted Answer

The problem is that you cannot initialize validate() inside a handler. You initialize it inside the document.ready and use .valid() to test for validity. A submit button is not required to validate the form in this case.

As per this answer:

.validate() is what initializes the Validation plugin on your form.

.valid() returns true or false depending on if your form is presently valid.

So within your .click() handler, you'd use .valid(), not .validate(), in conjunction with an if statement to test if form is valid...

$(document).ready(function() {

    $(#test).validate({  // initialize plugin on the form

         rules: {

         ...

         }

         ...

         // etc.

    });



    $(.next).click(function(){  // capture the click

        if($(#test).valid()){   // test for validity

            // do stuff if form is valid

        } else {

            // do stuff if form is not valid

        }

    });

});

See docs.jquery.com/Plugins/Validation/valid for more info.

Normally, you would have a type=submit button within the form container and, in that case, would not need to capture any clicks as this is all done automatically. This answer is tailored for the OP's specific case where a traditional submit button is not used.

Side-note: All of your JavaScript can be contained within a single set of <script></script> tags. Multiple sets of tags all strung together is unnecessary and superfluous.