El uso depende con el plugin jQuery Validación

StackOverflow https://stackoverflow.com/questions/379838

Pregunta

Tengo un formulario con un montón de cajas de texto que están desactivados por defecto, a continuación, se activaron al uso de una casilla de verificación al lado de cada uno.

Cuando se activa, se requieren los valores en estos cuadros de texto a ser un número válido, pero cuando está desactivado que no necesitan un valor (obviamente). Estoy usando el jQuery Validación plugin para hacer esta validación, pero no parece estar haciendo lo que espero.

Al hacer clic en la casilla de verificación y desactivar el cuadro de texto, sigo teniendo el error de campo no válido a pesar de la cláusula depends He añadido a las reglas (ver código de abajo). Curiosamente, lo que realmente sucede es que el mensaje de error muestra durante una fracción de segundo y luego desaparece.

A continuación se muestra un ejemplo de la lista de casillas de verificación y cuadros de texto: 

<ul id="ItemList">
<li>
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" />
    <input name="OneSelected" type="hidden" value="false" />
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" />
</li>
<li>
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" />
    <input name="TwoSelected" type="hidden" value="false" />
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" />
</li>
</ul>

Y aquí está el código que estoy usando jQuery 

//Wire up the click event on the checkbox
jQuery('#ItemList :checkbox').click(function(event) {
    var textBox = jQuery(this).siblings(':text');
    textBox.valid();
    if (!jQuery(this).attr("checked")) {
        textBox.attr('disabled', 'disabled');
        textBox.val('');
    } else {
        textBox.removeAttr('disabled');
        textBox[0].focus();
    }
});

//Add the rules to each textbox
jQuery('#ItemList :text').each(function(e) {
    jQuery(this).rules('add', {
        required: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        },
        number: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        }
    });
});

Ignorar el campo oculto en cada li que está ahí porque estoy usando el método Html.Checkbox de MVC asp.net.

¿Fue útil?

Solución

El uso de la opción "ignorar" ( http://docs.jquery.com/Plugins / validación / validar # toptions ) podría ser la forma más fácil para que usted pueda manejar esto. Depende de qué más tiene en el formulario. Por esto es que no se filtraría en los elementos desactivados si tuviera otros controles que fueron desactivadas pero todavía se necesitan para validar por alguna razón. Sin embargo, si esa ruta no funciona, usando una clase adicional para filtrar (agregar y quitar con sus casillas de verificación) en caso de que llegar a donde quiere ir, pero más fácil.

es decir. 

        $('form').validate({
            ignore: ":disabled",
            ...
        });

Otros consejos

Depende del parámetro no está funcionando correctamente, supongo que la documentación no está actualizado. Me las arreglé para conseguir este trabajo como esto: 

required : function(){ return $("#register").hasClass("open")}

Siguiendo respuesta @Collin Allen:

El problema es que si se desactiva una casilla de verificación cuando está mensaje de error es visible, el mensaje de error no desaparece.

lo he resuelto mediante la eliminación de un mensaje de error cuando se deshabilita el campo.

Tome demostración de Collin y hacer los siguientes cambios en el proceso de activación / desactivación: 

jQuery('#ItemList :checkbox').click(function()
{
    var jqTxb = $(this).siblings(':text')
    if ($(this).attr('checked'))
    {       
        jqTxb.removeAttr('disabled').focus();
    }
    else
    {
        jqTxb.attr('disabled', 'disabled').val('');
        var obj = getErrorMsgObj(jqTxb, "");
        jqTxb.closest("form").validate().showErrors(obj);
    }
});
function getErrorMsgObj(jqField, msg)
{
    var obj = {};
    var nameOfField = jqField.attr("name");
    obj[nameOfField] = msg;
    return obj;
}

Se puede ver que las tripas se quita el mensaje de error del campo cuando su desactivación

Y si usted se está preocupando $("form").validate(), no! No revalidar el formulario simplemente devuelve el objeto de la API de la validación de jQuery.

No sé si esto es lo que se va a ... pero no le .required cambiando a .wasReq (como un marcador de posición para diferenciar esto desde una que tal vez no sería necesario) en la comprobación de la caja ¿hacer la misma cosa? Si no está marcada, no se requiere el campo -. También se podría removeClass (número) para eliminar el error existe

A lo mejor de mi conocimiento, incluso si un campo está desactivado, las reglas aplicadas a ella siguen siendo, así, aplicado. Por otra parte, siempre se puede probar esto ... 

// Removes all values from disabled fields upon submit
$(form).submit(function() {
   $(input[type=text][disabled=disabled]).val();
});

No he probado el plugin de validación, pero el hecho de que el mensaje de muestra para un splitsecond me suena como un dilema, ¿cómo llamar a sus carpetas? Si enlaza en una función de tratar compromiso.Por justo antes de empezar, así: 

$('#ItemList :checkbox').unbind("click");
...Rest of code here...

No debe validar el campo después de activar / desactivar? 

jQuery('#ItemList :checkbox').click(function(event) {
        var textBox = jQuery(this).siblings(':text');

        if (!jQuery(this).attr("checked")) {
                textBox.attr('disabled', 'disabled');
                textBox.val('');
        } else {
                textBox.removeAttr('disabled');
                textBox[0].focus();
        }
        textBox.valid();    
});

Yo tenía el mismo problema.

He resuelto esto por tener el botón de selección de eventos de cambio llamada manejador válida () en todo el formulario.

funcionaba perfecto. Las otras soluciones anteriores no funcionan para mí.

No afiliado a StackOverflow
scroll top