如何在不提交表单的情况下使用 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()来测试有效性。 在这种情况下，不需要提交按钮来验证表单。

根据这个答案：

.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>标记。 多组标签串在一起是不必要的和多余的。