提出なしでjquery.validateが必要

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 1として

：

.validate()はあなたformの検証プラグインを初期化するものです。

.valid()フォームが現在有効かどうかによって、trueまたはfalseが返されます。

だからあなた.click()ハンドラ内で、あなたはより多くの情報を参照してくださいdocs.jquery.com/Plugins/Validation/valid ...フォームが有効であるかどうかをテストするために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 
     } 
    }); 
}); 

を.valid()、ない.validate()を使用すると思います。

通常、formコンテナ内にはtype="submit"ボタンがあります。この場合、すべて自動的に行われるため、クリックをキャプチャする必要はありません。この回答は、従来のsubmitボタンが使用されていないOP特有のケースに合わせて調整されています。

余談：あなたのJavaScriptのすべてが<script></script>タグの単一セット内に収容することができます。一緒に張られたタグの複数のセットは不要で余分です。