को jquery.validate सबमिट किए बिना

Question

मैंने इस बारे में कई अन्य पोस्ट पढ़ी हैं और अभी भी नहीं जाना है। इसे वास्तविक सरल रखने की कोशिश कर रहा है। मुझे अंतिम फॉर्म से पहले एक jQuery accordion में छुपा/दिखाया जा रहा है कि किसी भी रूप के अनुभागों को सत्यापित करने की आवश्यकता है। मैं लंबे समय तक 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 पर मान्यता प्लगइन initializes है।

.valid()true या false देता है कि आपका फॉर्म वर्तमान में मान्य है या नहीं।

तो अपने .click() हैंडलर के भीतर, आप .valid(), नहीं .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 देखें।

आम तौर पर, form कंटेनर के भीतर आपके पास type="submit" बटन होगा और उस स्थिति में, किसी भी क्लिक को कैप्चर करने की आवश्यकता नहीं होगी क्योंकि यह सब स्वचालित रूप से किया जाता है। यह उत्तर ओपी के विशिष्ट मामले के लिए तैयार है जहां पारंपरिक submit बटन का उपयोग नहीं किया जाता है।

साइड-ध्यान दें: आपकी जावास्क्रिप्ट के सभी <script></script> टैग की एक एकल सेट के भीतर समाहित किया जा सकता है। टैग के कई सेट एक साथ चिपके हुए हैं अनावश्यक और अनावश्यक है।