使用Jquery进行表单向导验证

Question

我正在使用Jquery实现表单向导验证。 当我提交表单或onkeyup事件时，它可以工作。 但是我正在尝试使用表单向导。 在单击下一步按钮时，更改代码后不会验证任何内容。 在单击下一步按钮时，在更改代码之前会出现警报消息。 我在Jquery中没有那么多知识。 这里有一些代码。

   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
        },
        ......................

为了执行表单向导验证，我将上面的代码更改为

        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
        },
        ..................

在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

但这没有用。 如何使用表单向导执行相同的验证，就像我对onkeyup和onkeyup所做的那样。

Answer 1

现在，更改为此功能后即可正常工作。

       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
        },
        ................