El uso depende del complemento jQuery Validation

Question

Tengo un formulario con un grupo de cuadros de texto que están deshabilitados de forma predeterminada, luego habilitado mediante el uso de una casilla de verificación al lado de cada uno.

Cuando está habilitado, se requiere que los valores en estos cuadros de texto sean un número válido, pero cuando están deshabilitados no necesitan un valor (obviamente). Estoy usando el complemento jQuery Validation para hacer esta validación, pero no parece estar haciendo lo que esperaba.

Cuando hago clic en la casilla de verificación y deshabilito el cuadro de texto, sigo recibiendo el error de campo no válido a pesar de la cláusula depends que agregué a las reglas (vea el código a continuación). Curiosamente, lo que realmente ocurre es que el mensaje de error se muestra por una fracción de segundo y luego desaparece.

Este es un ejemplo de la lista de casillas de verificación & los 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 jQuery Estoy usando

//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 asp.net MVC.

Answer 1

El uso de la opción "ignorar" (http://docs.jquery.com/Plugins/Validation/validate#toptions) podría ser la forma más fácil para que usted pueda manejar esto. Depende de qué más tenga en el formulario. Por ejemplo, no filtraría los elementos desactivados si tuviera otros controles que estaban deshabilitados pero aún así necesita validarlos por alguna razón. Sin embargo, si esa ruta no funciona, usar una clase adicional para filtrar (agregar y eliminar con sus casillas de verificación) debería llevarlo a donde quiere ir, pero más fácil.

I.e.

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

Answer 2

No sé si esto es lo que estaba buscando ... pero no cambiaría .requiere a .wasReq (como marcador de posición para diferenciarlo de uno que tal vez no sería necesario) al verificar el caja hacer lo mismo? Si no está marcado, el campo no es obligatorio; también puede eliminar Class (number) para eliminar el error allí.

Según mi leal saber y entender, incluso si un campo está desactivado, las reglas aplicadas a él siguen siendo, bueno, aplicadas. Por otra parte, siempre se puede probar este ...

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

Answer 3

que no he probado el plug-in 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 una función, intente desvincularla justo antes de comenzar, de esta forma:

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

Answer 4

¿No debería validar el campo después de deshabilitar/habilitar?

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();  
}); 

Answer 5

Por lo general, cuando se hace esto, me salto 'depende' y sólo tiene que utilizar la regla de jQuery Validar required y se deja manejar el control basado en el selector dado, en oposición a la división de la lógica entre las reglas de validación y la casilla de verificación haga clic en controlador. Junté un quick demo de cómo logro esto, usando su marcado.

Realmente, se reduce a required:'#OneSelected:checked'. Esto hace que el campo en cuestión sea necesario solo si la expresión es verdadera.En la demostración, si envía la página de inmediato, funciona, pero cuando marca las casillas, el formulario no puede enviarse hasta que los campos marcados se completen con alguna entrada. Todavía puede poner una llamada .valid() en el controlador de clic de casilla de verificación si desea validar el formulario completo al hacer clic.

(También, acorta su casilla alternar un poco, haciendo uso de la función de encadenamiento maravilloso de jQuery, aunque su "caching" para textBox es igual de eficaz.)

Answer 6

Depende parámetro no está funcionando correctamente, supongo la documentación está desactualizada me las arreglé para conseguir este trabajo así:

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

Answer 7

que tenían el mismo problema.

Lo resolví haciendo que el botón de selección de cambios de controlador de eventos llame a valid() en todo el formulario.

Funcionó perfecto. Las otras soluciones anteriores no funcionaron para mí.

Answer 8

Siguiendo @Collin Allen respuesta:

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 eliminando el mensaje de error al deshabilitar el campo.

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

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 las tripas me quito el mensaje de error del campo cuando su desactivación

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