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

Question

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

Answer 1

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.