Validación del formulario jQuery al hacer clic en el botón

Tengo una página simple con un formulario y un botón fuera del formulario. Estoy tratando de validar el formulario con el clic del botón. He agregado las reglas para la validación del formulario en la función document.onready. Sin embargo, el formulario no está siendo validado.

HTML: –

       
Field 1:

JS: –

 $(document).ready(function(){ $("#form1").validate({ rules: { field1: "required" }, messages: { field1: "Please specify your name" } }) $('#btn').click(function() { $("#form1").validate(); // This is not working and is not validating the form }); }); 

¿Alguna idea de lo que está mal?

Dentro de su manejador de click , el error es el método .validate() ; solo inicializa el complemento, no valida el form .

Para eliminar la necesidad de tener un botón de submit dentro del form , use .valid() para activar una verificación de validación …

 $('#btn').on('click', function() { $("#form1").valid(); }); 

jsFiddle Demo

.validate() – para inicializar el complemento (con opciones) una vez en DOM listo.

.valid() – para verificar el estado de validación (valor booleano) o para activar una prueba de validación en el form en cualquier momento.

De lo contrario, si tuviera un botón type="submit" dentro del contenedor de form , no necesitaría un manejador de click especial y el método .valid() , ya que el complemento lo capturaría automáticamente.

Demo sin controlador de click


EDITAR :

También tiene dos problemas en su HTML …

  
  • No necesita class="required" cuando declara reglas dentro de .validate() . Es redundante y superfluo.

  • El atributo de name falta. Las reglas se declaran dentro de .validate() por su name . El complemento depende de los atributos de name únicos para realizar un seguimiento de las entradas.

Debiera ser…

  
 $(document).ready(function() { $("#form1").validate({ rules: { field1: "required" }, messages: { field1: "Please specify your name" } }) }); 
Field 1:

También estás usando type = “button”. Y no estoy seguro de por qué debe separar el botón Enviar, colóquelo dentro del formulario. Es más apropiado hacerlo de esa manera. Esto debería funcionar.

También puedes lograr otra forma usando la etiqueta de botón

Según el nuevo atributo html5, también puede agregar un atributo de formulario como

 

Entonces, el botón se adjuntará al formulario.

Esto debería funcionar con el plugin validate () de jQuery como:

 var validator = $( "#formId" ).validate(); validator.element( "#myButton" ); 

Está funcionando también con la etiqueta de entrada

Fuente :

https://developer.mozilla.org/docs/Web/HTML/Element/Button