Bootstrap con jQuery Validation Plugin

Estoy intentando agregar validación a mi formulario con el complemento de validación jQuery, pero tengo un problema donde el complemento pone los mensajes de error cuando estoy usando grupos de entrada.

el problema

$('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 

Mi código: http://jsfiddle.net/hTPY7/4/

para una compatibilidad total con twitter bootstrap 3, necesito anular algunos métodos de complementos:

 // override jquery validate plugin defaults $.validator.setDefaults({ highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); 

Ver Ejemplo: http://jsfiddle.net/mapb_1990/hTPY7/7/

Para una compatibilidad total con Bootstrap 3, agregué soporte para input-group , radio y checkbox , que faltaba en las otras soluciones.

Actualización 20/10/2017 : sugerencias inspeccionadas de las otras respuestas y soporte adicional agregado para marcado especial de radio en línea , mejor colocación de errores para un grupo de radios o casillas de verificación y soporte adicional para una clase personalizada de no validación para evitar la validación de controles. Espero que esto ayude y gracias por las sugerencias.

Después de incluir el complemento de validación, agregue la siguiente llamada:

 $.validator.setDefaults({ errorElement: "span", errorClass: "help-block", highlight: function (element, errorClass, validClass) { // Only validation controls if (!$(element).hasClass('novalidation')) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); } }, unhighlight: function (element, errorClass, validClass) { // Only validation controls if (!$(element).hasClass('novalidation')) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); } }, errorPlacement: function (error, element) { if (element.parent('.input-group').length) { error.insertAfter(element.parent()); } else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) { error.insertAfter(element.parent().parent()); } else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') { error.appendTo(element.parent().parent()); } else { error.insertAfter(element); } } }); 

Esto funciona para todas las clases de formulario de Bootstrap 3. Si usa una forma horizontal, debe usar la siguiente marca. Esto garantiza que el texto del bloque de ayuda respete los estados de validación (“has-error”, …) del formulario-grupo .

 

Utilizo formularios diseñados solo con Twitter Bootstrap 3. Configuré las funciones predeterminadas para validor y solo corroboro el método con reglas. Uso Icons from FontAweSome, pero puedes usar Glyphicons como en el ejemplo de doc.

enter image description here

 jQuery.validator.setDefaults({ highlight: function (element, errorClass, validClass) { if (element.type === "radio") { this.findByName(element.name).addClass(errorClass).removeClass(validClass); } else { $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); $(element).closest('.form-group').find('i.fa').remove(); $(element).closest('.form-group').append(''); } }, unhighlight: function (element, errorClass, validClass) { if (element.type === "radio") { this.findByName(element.name).removeClass(errorClass).addClass(validClass); } else { $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); $(element).closest('.form-group').find('i.fa').remove(); $(element).closest('.form-group').append(''); } } }); 

Hecho. Después de ejecutar la función de validación:

 $("#default-register-user").validate({ rules: { 'login': { required: true, minlength: 5, maxlength: 20 }, 'email': { required: true, email: true, minlength: 5, maxlength: 100 }, 'password': { required: true, minlength: 6, maxlength: 25 }, 'confirmpassword': { required: true, minlength: 5, maxlength: 25, equalTo: "#password" } } }); 

Ejemplo JSFiddle

Añadiendo a la respuesta anterior de Miguel Borges, puede darle al usuario la retroalimentación de éxito verde agregando la siguiente línea en el bloque de código de resaltado / destello.

  highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); } 

esta es la solución que necesita, puede usar el método errorPlacement para anular dónde colocar el mensaje de error

 $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, errorPlacement: function(error, element) { error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group. }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 

me funciona como la magia. Aclamaciones

Esto es lo que uso al agregar la validación al formulario:

 // Adding validation to form. $(form).validate({ rules: { title: { required: true, minlength: 3, }, server: { ipAddress: true, required: true } }, highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); }, errorClass: 'help-block' }); 

Esto funcionó para mí para el estilo de Bootstrap 3 cuando usé la biblioteca de validación de jquery.

Lo usé para la radio:

  if (element.prop("type") === "checkbox" || element.prop("type") === "radio") { error.appendTo(element.parent().parent()); } else if (element.parent(".input-group").length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } 

de esta forma, el error se muestra en la última opción de radio.

Esto hace que los campos

  $("#form_questionario").validate({ debug: false, errorElement: "span", errorClass: "help-block", highlight: function (element, errorClass, validClass) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function (element, errorClass, validClass) { $(element).closest('.form-group').removeClass('has-error'); }, errorPlacement: function (error, element) { if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') { error.insertBefore(element.parent()); } else { error.insertAfter(element); } }, // Specify the validation rules rules: { 'campo1[]': 'required', 'campo2[]': 'required', 'campo3[]': 'required', 'campo4[]': 'required', 'campo5[]': 'required' }, submitHandler: function (form) { form.submit(); } }); 

agregue la corrección de radio en línea a este https://stackoverflow.com/a/18754780/966181

 $.validator.setDefaults({ highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else if (element.parent('.radio-inline').length) { error.insertAfter(element.parent().parent()); } else { error.insertAfter(element); } } }); 

Sé que esta pregunta es para Bootstrap 3, pero como algunas preguntas relacionadas con Bootstrap 4 se redireccionan a esta como duplicados, aquí está el fragmento compatible con Bootstrap 4:

 $.validator.setDefaults({ highlight: function(element) { $(element).closest('.form-group').addClass('has-danger'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-danger'); }, errorElement: 'small', errorClass: 'form-control-feedback d-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else if(element.prop('type') === 'checkbox') { error.appendTo(element.parent().parent().parent()); } else if(element.prop('type') === 'radio') { error.appendTo(element.parent().parent().parent()); } else { error.insertAfter(element); } }, }); 

Las pocas diferencias son:

  • El uso de clase has-danger lugar de has-error
  • Mejor error de posicionamiento de radios y casillas de verificación

Para el bootstrap 4 beta hubo algunos grandes cambios entre las versiones alfa y beta de bootstrap (y también bootstrap 3), esp. en lo que respecta a la validación de formularios.

Primero, para colocar los íconos correctamente, necesitarás agregar un estilo que se corresponda con lo que estaba en el arranque 3 y ya no en el arranque beta beta … esto es lo que estoy usando

 .fa.valid-feedback, .fa.invalid-feedback { position: absolute; right: 25px; margin-top: -50px; z-index: 2; display: block; pointer-events: none; } .fa.valid-feedback { margin-top: -28px; } 

Las clases también han cambiado ya que la versión beta usa el “estado” del control en lugar de las clases que el código publicado no refleja, por lo que su código anterior puede no funcionar. De todos modos, deberás agregar la clase ‘was-validated’ al formulario ya sea en las devoluciones de llamada de éxito o de resaltado / desmarcado

 $(element).closest('form').addClass('was-validated'); 

También recomendaría usar el nuevo elemento y las clases para el texto de ayuda de control de formulario

 errorElement: 'small', errorClass: 'form-text invalid-feedback', 

La respuesta de DARK_DIESEL funcionó muy bien para mí; aquí está el código para cualquiera que quiera el equivalente usando glyphicons:

 jQuery.validator.setDefaults({ highlight: function (element, errorClass, validClass) { if (element.type === "radio") { this.findByName(element.name).addClass(errorClass).removeClass(validClass); } else { $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); $(element).closest('.form-group').find('span.glyphicon').remove(); $(element).closest('.form-group').append(''); } }, unhighlight: function (element, errorClass, validClass) { if (element.type === "radio") { this.findByName(element.name).removeClass(errorClass).addClass(validClass); } else { $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); $(element).closest('.form-group').find('span.glyphicon').remove(); $(element).closest('.form-group').append(''); } } }); 

Otra opción es ubicar un contenedor de errores fuera de su grupo de formularios antes de tiempo. El validador lo usará si es necesario.