musi jquery.validate bez przedstawienia

Question

Przeczytałem kilka innych stanowisk na ten temat i nadal nie ma ruchu. Stara się zachować to naprawdę proste. Muszę zweryfikować sekcje formularza, które są ukryte/pokazane na akordeonie jQuery przed ostatecznym przesłaniem. I zostały z wykorzystaniem jquery.validate.js przez długi czas i tak długo jak mogę zweryfikować na submit wszystko jest dobre, ale teraz gdy próbuję zweryfikować przycisk click to nie działa.

<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

Problem polega na tym, że nie można zainicjować validate()wewnątrz Handler. Inicjujesz go wewnątrz document.ready i używasz .valid() do sprawdzania poprawności. Przycisk do przesłania nie jest wymagany do zatwierdzenia formularza w tym przypadku.

Zgodnie this answer:

.validate() co inicjuje wtyczkę Validation na form.

.valid() zwraca true lub false w zależności od tego, czy formularz jest obecnie ważny.

Więc w swoim obsługi .click(), można użyć .valid() nie .validate(), w połączeniu z oświadczeniem if aby sprawdzić, czy forma jest ważna ...

$(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 
     } 
    }); 
}); 

Zobacz docs.jquery.com/Plugins/Validation/valid aby uzyskać więcej informacji.

Zwykle w jednym z kontenerów znajduje się przycisk . W takim przypadku nie trzeba wykonywać żadnych kliknięć, ponieważ wszystko dzieje się automatycznie. Ta odpowiedź jest dostosowana do konkretnego przypadku OP, w którym tradycyjny przycisk nie jest używany.

Side-note: Wszystkie JavaScript mogą być zawarte w pojedynczy zestaw <script></script> tagów. Wiele zestawów tagów połączonych ze sobą jest niepotrzebne i zbędne.