如何在不提交表单的情况下使用jQuery.validate？ [英] How can I use jQuery.validate without submitting the form?

问题描述

我已经阅读了其他一些与此相关的文章，但仍然没有完成。试图使它真正简单。我需要在最终提交之前验证在jQuery手风琴中隐藏/显示的表单部分。我已经使用 jquery.validate.js 很长时间了，只要我在 submit 上进行验证就可以了，但是现在当我尝试验证按钮单击时，它不起作用。

I have read several of the other posts about this and still no go. Trying to keep it real simple. I need to validate sections of a form that are being hidden/shown in a jQuery accordion before final submit. I have been using jquery.validate.js for a long time and as long as I validate on submit all is good, but now when I try to validate on button click it is not working.

    <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 -->

推荐答案

问题是您无法初始化 validate（） 内部处理程序。您可以在 document.ready 内部对其进行初始化，然后使用 .valid（）进行有效性测试。在这种情况下，不需要提交按钮来验证表单。

The problem is that you cannot initialize validate() inside a handler. You initialize it inside the document.ready and use .valid() to test for validity. A submit button is not required to validate the form in this case.

根据此答案：

.validate（） 是初始化表单上的Validation插件的方法。

.validate() is what initializes the Validation plugin on your form.

.valid（） 返回 true 或 false ，具体取决于您的表单当前是否有效。

.valid() returns true or false depending on if your form is presently valid.

因此，在 .click（）处理程序中，您将使用 .valid（）， .validate（），而不是 if 语句来测试表单是否有效...

So within your .click() handler, you'd use .valid(), not .validate(), in conjunction with an if statement to test if form is valid...

$(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 了解更多信息。

通常，您会有<$ c 表单容器中的$ c> type = submit 按钮，在这种情况下，无需捕获任何点击，因为这就是全部自动完成。此答案是针对OP的特定情况量身定制的，其中不使用传统的 submit 按钮。

Normally, you would have a type="submit" button within the form container and, in that case, would not need to capture any clicks as this is all done automatically. This answer is tailored for the OP's specific case where a traditional submit button is not used.

侧面-note：您所有的JavaScript都可以包含在< script>< / script> 标记的单个集中。将所有的多个标签串在一起是不必要且多余的。

Side-note: All of your JavaScript can be contained within a single set of <script></script> tags. Multiple sets of tags all strung together is unnecessary and superfluous.

这篇关于如何在不提交表单的情况下使用jQuery.validate？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！