14

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

1 回答 1

44

问题是您无法validate() 在处理程序中进行初始化。您在内部初始化它document.ready并用于.valid()测试有效性。在这种情况下，不需要提交按钮来验证表单。

根据这个答案：

.validate()是在您的form.

.valid()返回true或false取决于您的表格目前是否有效。

因此，在您的.click()处理程序中，您将使用.valid(), not.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"在容器中拥有一个按钮form，在这种情况下，不需要捕获任何点击，因为这一切都是自动完成的。submit这个答案是针对不使用传统按钮的 OP 的特定情况量身定制的。

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

于 2012-08-23T22:49:13.937 回答