使用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做了什麼並提交。

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