Estoy usando jquery.validate v1.14.0 por Jörn Zaefferer
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>Tengo un proyecto en el que toda la validación funcionó correctamente. Cuando un campo obligatorio no se completó, la validación del lado del cliente lo recogería antes de que se enviara el formulario.
Sin embargo, moví todos estos formularios a los modales boostrap y el formulario de una página se carga dinámicamente dentro del modal a través de una llamada ajax. Después de este cambio, la validación del lado de mi cliente nunca se activa y también noto que el complemento de validación no agrega la etiqueta novalidate="novalidate" al formulario como lo hacía antes.
Aquí está mi código simplificado
Luego uso el siguiente jquery, ya que me gustaría capturar todos los envíos de formularios y hacer algo de lógica adicional:
$(document).on('submit', '.formDetail', function (e) { e.preventDefault(); //added this to see if it would throw error but it doesn't var form = $(".formDetail"); form.validate(); //this is always true if ($(this).valid()) { $.ajax({ processData: false, contentType: false, data: new FormData(this), type: $(this).attr('method'), url: $(this).attr('action'), success: function (data) { //other logic } }); } }); Si String1 se deja en blanco y envío y paso por la consola de javascript '($(this).valid())' siempre es true . Si lo cambio a ($(".formDetail").valid()) el resultado es el mismo, es decir, siempre true .
Tampoco muestra el mensaje de error en la pantalla antes de HTTP POST como lo hacía antes de cambiar a formas modales dinámicas de ajax.
¿Cómo hago para que valid() funcione? No hay ningún error de javascript en mi consola cuando repaso el código y valid() siempre es verdadero, lo que me hace saber qué hace que la validación siempre sea exitosa. Si no se encuentra el complemento de validación de jquery, seguramente obtendría un error de consola de javascript, pero no lo soy.
Intenté agregar manualmente la etiqueta novalidate=novalidate al formulario, pero esto no ayuda. Creo que el hecho de que esto no se complete me dice que algo no está bien. Puede ver en mi código que intenté forzar la validate() pero esto no marcó la diferencia.
Prueba esto
$(document).on('submit', '.formDetail', function (e) { e.preventDefault(); $(this).removeData("validator").removeData("unobtrusiveValidation");//remove the form validation $.validator.unobtrusive.parse($(this));//add the form validation if ($(this).valid()) { $.ajax({ processData: false, contentType: false, data: new FormData(this), type: $(this).attr('method'), url: $(this).attr('action'), success: function (data) { //other logic } }); } });Intenté agregar manualmente la etiqueta
novalidate=novalidateal formulario, pero esto no ayuda. Creo que el hecho de que esto no se complete me dice que algo no está bien.
El atributo novalidate simplemente desactiva la validación HTML5 integrada del navegador; no tiene nada que ver con hacer que el complemento funcione. Este atributo se agrega dinámicamente cuando el complemento jQuery Validate se inicializa correctamente para que no tenga la validación HTML5 junto con jQuery Validate. Intentar agregar/eliminar manualmente novalidate no afectará el funcionamiento del complemento jQuery Validate.
Todo esto está mal...
$(".formDetail").submit(function (e) { e.preventDefault(); var form = $(".formDetail"); form.validate(); if ($(this).valid()) { $.ajax({ .... El método .validate() es cómo se inicializa el complemento. En otras palabras, no lo inicializaría dentro del controlador de submit o click . El complemento captura automáticamente el clic del envío, por lo que solo incluiría el método .validate() dentro del controlador listo para DOM.
El método .valid() solo funciona después de inicializar el complemento.
Según la documentación , cualquier ajax utilizado para enviar el formulario iría dentro de la función de devolución de llamada de submitHandler .
$(document).ready(function() { $(".formDetail").validate({ submitHandler: function(form) { // fires only when form is valid // your ajax here $.ajax({ .... }); return false; } }); if ($(".formDetail").valid()) { // this will work now, but you probably wouldn't need it anymore // since your ajax is is placed where it belongs. }); ....Consulte la página Tag Wiki para conocer la configuración y el uso básicos.
Moví todos estos formularios a los modales de arranque y el formulario de una página se carga dinámicamente dentro del modal a través de una llamada ajax.
El complemento jQuery Validate solo se puede inicializar en estos formularios después de que existan en el DOM.
Crear/Cargar el formulario en el DOM.
Adjuntar/llamar .validate() en el formulario.
El formulario está listo para validar automáticamente la entrada de datos.
NOTA :
Si también está utilizando el complemento de validación discreta de Microsoft, entonces el método .validate() se construye y llama automáticamente y las reglas se declaran en función de los atributos HTML en línea. Dado que el método .validate() es manejado por el complemento de validación discreta, entonces no puede volver a llamar a .validate() ya que estas llamadas posteriores siempre se ignoran.