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语句一起测试表单是否有效... < / p>
$(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"容器中会有一个form按钮，在这种情况下，不需要捕获任何点击，因为这一切都是自动完成的。这个答案是针对OP的特定情况而定制的，其中没有使用传统的submit按钮。

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

需要jquery.validate而不提交

1 个答案: