如何在不提交表单的情况下使用 jQuery.validate？答案

【问题标题】：How can I use jQuery.validate without submitting the form?如何在不提交表单的情况下使用 jQuery.validate？
【发布时间】：2012-08-23 18:42:51
【问题描述】：

我已经阅读了其他几篇关于此的帖子，但仍然没有成功。试图保持简单。我需要在最终提交之前验证在 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 -->

【问题讨论】：

这个POST 会帮助你。
感谢昆丹的回复。我很抱歉，但我看不出它对我有什么帮助。我的表单标签上没有 onsubmit 并且我没有检查 '("#test").validate' 是否返回 true 是否发生某些事情。我想将我的字段值传递给验证器的函数以进行处理/评估。似乎附加到具有“下一步”类的按钮的单击功能只是没有发生

标签： javascript jquery jquery-validate

【解决方案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 了解更多信息。

通常，type="submit" 容器内会有一个 type="submit" 按钮，在这种情况下，不需要捕获任何点击，因为这一切都是自动完成的。此答案是针对 OP 的特定情况量身定制的，即不使用传统的 submit 按钮。

旁注：您的所有 JavaScript 都可以包含在单个组 <script></script> 标记中。多组标签串在一起是不必要的，也是多余的。

【讨论】：