necesita jquery.validate sin enviar

Question

He leído varias de las otras publicaciones sobre esto y todavía no voy. Tratando de mantenerlo realmente simple. Necesito validar secciones de un formulario que se ocultan/muestran en un acordeón jQuery antes del envío final. He estado usando jquery.validate.js durante mucho tiempo y siempre y cuando valide en submit todo está bien, pero ahora cuando intento validar con el botón click, no funciona.

<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

El problema es que no se puede inicializar validate() dentro de un manejador. Inicialícelo dentro del document.ready y use .valid() para probar la validez. No se requiere un botón de envío para validar el formulario en este caso.

Según this answer:

.validate() es lo que inicia el plugin de validación en su form.

.valid() devuelve true o false dependiendo de si su formulario es actualmente válido.

Así que dentro de su controlador .click(), tendrá que utilizar .valid(), no .validate(), junto con una declaración if para probar si la forma es válida ...

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

Ver docs.jquery.com/Plugins/Validation/valid para obtener más información.

Normalmente, tendría un botón type="submit" en el contenedor form y, en ese caso, no necesitaría capturar ningún clic, ya que todo esto se hace automáticamente. Esta respuesta está diseñada para el caso específico del OP donde no se usa el botón tradicional submit.

Side-nota: Todo tu JavaScript puede estar contenido dentro de un conjunto único de <script></script> etiquetas. Múltiples conjuntos de etiquetas unidas entre sí es innecesario y superfluo.