Form wizard validation with Jquery

Question

I'm implementing form wizard validation with Jquery. It works while I submitting a form or onkeyup event. But Same thing I'm trying with form wizard. while clicks next button it doesn't validate any thing after I changed the code. While clicks on next button alert message is coming before I changed the code. I didn't have that much knowledge in Jquery. Some piece of code here.

   onNext: function(tab, navigation, index) 
        {
            if(index==1)
            {
                if(!wiz.find('#inputname').val()) {
                    alert('You must enter the username');
                    wiz.find('#inputname').focus();
                    return false;
                }
            }
        }, 
        ....................


        $(function()
        {
      // validate form on keyup and submit
      $("#validateSubmitForm").validate({
      rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2
        },
        ......................

To perform form wizard validation I've changed the above code to

        onNext: function(tab, navigation, index) 
        {
            if(index==1)
            {
                  myfun();
            }
        ................


      function myfun()
      {
      // validate form on keyup and submit
       $("#validateSubmitForm").validate({
       rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2
        },
        ..................

In JSP:

    <div class="tab-pane active" id="tab1">
    <form class="form-horizontal" style="margin-bottom: 0;" id="validateSubmitForm" method="get" autocomplete="off">
     <div class="control-group">
     <label class="control-label" for="firstname">First name</label>
     <div class="controls"><s:textfield class="span12" id="firstname" name="firstname"/></div>
     </div>
            .........................
     <div class="form-actions">
     <button type="submit" class="btn btn-icon btn-primary glyphicons circle_ok"><i></i>Save</button>
     <button type="button" class="btn btn-icon btn-default glyphicons circle_remove"><i></i>Cancel</button>
     </div>
     </form></div>//tab div

But it didn't working. How to perform same validation with form wizard what I did with onkeyup and submit.

Answer 1

Now it's working after changed to this.

       onNext: function(tab, navigation, index) 
        {
               if ($('#validateSubmitForm').validate().form()) 
                {
                    return true;
                } 
                else 
                {
                    return false;// prevent moving on if the form is invalid
                }
              ..............



       $(function()
       {
       // validate form on keyup and submit
        $("#validateSubmitForm").validate({
        rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2
        },
        ................