es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Selector deshabilitado no funciona en la cláusula de omisión de Jquery Validate.

Tengo múltiples listas desplegables pobladas con AJAX en una página HTML. El formulario se valida utilizando jQuery Validate.

He configurado las listas desplegables como ‘deshabilitadas’ hasta que se complete el AJAX, momento en el que se elimina la propiedad de “deshabilitado”.

El contenido de estos campos es obligatorio. Me gustaría validarlos aunque estén deshabilitados para evitar que el usuario envíe un formulario que todavía está cargando datos AJAX obligatorios.

Mi HTML es:






Estoy usando el siguiente parámetro de ignorar en jQuery Validate como se sugiere en los comentarios a continuación:

$(document).ready(function() {
$(‘#myform’).validate({
ignore:[],
rules: {
foo: {
required: true
},
bar: {
required: true
}
}
});
});

El script Validate todavía no parece estar ignorando el estado deshabilitado del campo. ¿Qué estoy haciendo mal?

http://jsfiddle.net/aekntmor/

He intentado agregar una clase a la lista desplegable deshabilitada y luego modificar el script de la siguiente manera.

ignorar: ”deshabilitado:no(.validate-disabled)’,

Tags:  ,

Answer

  1. Avatar for davy.ai

    Sin embargo, esto parece no estar funcionando correctamente. ¿Qué estoy haciendo mal?

    Parece que el parámetro ignore no está funcionando como se espera cuando se usa con campos desactivados. Para solucionar este problema, puedes utilizar el parámetro onfocusout para validar el campo cuando pierde el foco. Esto garantizará que el campo se valide incluso si está desactivado.

    El script modificado debería verse así:

    $(document).ready(function() {
        $('#myform').validate({
            onfocusout: function(element) {
                $(element).valid();
            },
            rules: {
                foo: {
                    required: true
                },
                bar: {
                    required: true
                }
            }
        });
    });
    

    Puedes encontrar un ejemplo funcional de esta solución aquí.

Comments are closed.