需要jquery.validate而不提交

Question

我已經閱讀了其他幾篇關於這個帖子，但仍然沒有去。試圖保持真實簡單。我需要在最終提交之前驗證在jQuery手風琴中隱藏/顯示的表單部分。我一直在使用jquery.validate.js很長一段時間，只要我驗證了submit一切都很好，但是現在當我嘗試驗證按鈕click時，它不起作用。

<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

的問題是，你不能初始化validate()內的處理程序。您在document.ready內初始化它並使用.valid()來測試有效性。在這種情況下，不需要提交按鈕來驗證表單。

按this answer：

.validate()就是你的form初始化驗證插件。

.valid()返回true或false取決於您的表單目前是否有效。

所以你.click()處理程序中，你會使用.valid()，不.validate()，連同一個if語句來測試，如果表單有效...

$(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 
     } 
    }); 
}); 

更多信息，請參見docs.jquery.com/Plugins/Validation/valid。

通常情況下，您將在form容器中有一個type="submit"按鈕，在這種情況下，不需要捕獲任何點擊，因爲這些操作都是自動完成的。這個答案是針對OP的特定情況而設計的，其中不使用傳統的submit按鈕。

側面說明：你的所有的JavaScript可以包含一個單一套<script></script>標籤內。所有串在一起的多組標籤是不必要的和多餘的。