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 を1 つ<script></script>のタグセットに含めることができます。複数のタグ セットをすべてつなぎ合わせる必要はなく、不要です。

于 2012-08-23T22:49:13.937 に答える