¿Cómo puedo agregar, eliminar o cambiar las reglas de validación jQuery de una página?

Question

Nota:
Esta pregunta se refiere a una versión muy antigua de jQuery.validate() (versión 1.5). Este complemento ahora proporciona una solución integrada para hacer esto: el .rules() method que se debe usar en su lugar. Dejo esta pregunta y respuesta en su forma original para fines históricos para cualquier persona que necesite mantener un sitio heredado que no puede actualizar a las últimas versiones de jQuery y jQuery.validate().

---

Tengo un formulario que alterna qué elementos de entrada son visibles. Quiero validar solo los elementos visibles en el formulario.

Me está costando conseguir que esto funcione correctamente. Quiero desactivar validadores para elementos no visibles y parece que no puedo encontrar la mejor manera de hacerlo. Cualquier información sobre lo que puede estar mal con mi código, o mi enfoque sería apreciado.

Cuando se activa la visibilidad, lo he intentado un par de cosas:

• Calling $("form").rules("remove") para borrar todas las reglas de validación existentes. Esto arroja una excepción de JavaScript "indefinida".
• Llamando $("form").validation(...options...) para los elementos visibles, esperando que esto sobrescriba las reglas. Esto solo permite que el primer grupo que se valida funcione. El segundo panel no puede ser validado.
• Desvinculación del manejador de envío antes de llamar al nuevo método validation(). Esto no hizo lo que yo hubiera pensado. Elimina toda validación (aparentemente) de forma permanente y el formulario se envía sin validación.
• Limpiar el objeto de validación con $.removeData($('form'), 'validator') antes de intentar llamar al validador nuevamente. Esto tampoco funciona.
• Esto se encuentra en un sitio ASP.NET, por lo que no es posible utilizar varias etiquetas <form /> ya que eso rompería la página.

Estoy algo perplejo sobre cómo puedo hacer que esto funcione. Puede ver una demostración de trabajo completa de lo que tengo en http://jsbin.com/ucibe3, o editarla en http://jsbin.com/ucibe3/edit. Intenté reducirlo a solo el código que causa el error.

Estas son las piezas clave de mi código (aplicaciones de enlaces para la página completa de trabajo)

HTML:

<td id="leftform"> 
    Left Form<br /> 
    Input 1: <input type="text" name="leftform_input1" /><br /> 
    Input 2: <input type="text" name="leftform_input2" /><br /> 
    <input type="submit" name="leftform_submit" value="Submit Left" /> 
</td> 
<td id="rightform" style="visibility:hidden"> 
    Right Form<br /> 
    Input 1: <input type="text" name="rightform_input1" /><br /> 
    Input 2: <input type="text" name="rightform_input2" /><br /> 
    <input type="submit" name="rightform_submit" value="Submit Right" /> 
</td> 

JavaScript:

$('#toggleSwitch').click(function() { 
    if ($('#leftform').css("visibility") !== "hidden") { 
     $('#leftform').css("visibility", "hidden"); 
     $('#rightform').css("visibility", "visible"); 
     $('form').validate({ 
      rules: { 
       rightform_input1: { required: true }, 
       rightform_input2: { required: true } 
      }, 
      messages: { 
       rightform_input1: "Field is required", 
       rightform_input2: "Field is required" 
      } 
     }); 
    } else { 
     $('#rightform').css("visibility", "hidden"); 
     $('#leftform').css("visibility", "visible"); 
     $('form').validate({ 
      rules: { 
       leftform_input1: { required: true }, 
       leftform_input2: { required: true } 
      }, 
      messages: { 
       leftform_input1: "Field is required", 
       leftform_input2: "Field is required" 
      } 
     }); 
    } 
}); 

Answer 1

notificación obsoleto:
esta pregunta se refiere a una versión muy antigua de la jQuery.validate() plug-in (versión 1.5) y ahora es obsoleto como el plugin proporciona una API oficial para resolver este problema. Vea el .rules() documentation para conocer el enfoque actual para resolver esto. Dejo esta respuesta como está para ayudar a cualquier persona que deba mantener un sitio heredado que no puede actualizar a las últimas versiones de jQuery y jQuery.validate().

---

Este utiliza una característica del dispositivo de comprobación de que no está bien documentada en la API (y con esto quiero decir que no está documentado en todos), sin embargo, ya que es una parte fundamental de cómo funciona el validador, no es probable que se elimine, incluso si no está documentado.

Una vez que haya inicializado el validador jQuery, puede obtener acceso al objeto validador nuevamente llamando al método validate() en el objeto de formulario al que aplicó el validador. Este objeto de validador tiene una propiedad settings, que almacena la configuración predeterminada, combinada con la configuración que le ha aplicado en la inicialización.

Suponiendo que inicializar el validador de la siguiente manera:

$('form').validate({ 
    rules: { 
     leftform_input1: { required: true }, 
     leftform_input2: { required: true } 
    }, 
    messages: { 
     leftform_input1: "Field is required", 
     leftform_input2: "Field is required" 
    } 
}); 

A continuación, puedo conseguir esos ajustes exactos del validador de la siguiente manera:

var settings = $('form').validate().settings; 

puedo luego trabajar fácilmente con esta configuración objeto para agregar o eliminar validadores para el formulario.

Esta es la forma en que le quite las reglas de validación:

var settings = $('form').validate().settings; 
delete settings.rules.rightform_input1; 
delete settings.messages.rightform_input1; 

y así es como debe agregar reglas de validación:

var settings = $('form').validate().settings; 
settings.rules.leftform_input1 = {required: true}; 
settings.messages.leftform_input1 = "Field is required"; 

---

Aquí es una solución de trabajo para el escenario en mi pregunta. Utilizo el método extend() de jQuery para sobrescribir las propiedades rules y messages del objeto validate, que es la forma en que alterno entre los dos paneles.

$('#toggleSwitch').click(function() { 
    var settings = $('form').validate().settings; 
    var leftForm = $('#leftform'); 
    var rightForm = $('#rightform'); 

    if (leftForm.css("visibility") !== "hidden") { 
     leftForm.css("visibility", "hidden"); 
     rightForm.css("visibility", "visible"); 
     $.extend(settings, { 
      rules: { 
       rightform_input1: { required: true }, 
       rightform_input2: { required: true } 
      }, 
      messages: { 
       rightform_input1: "Field is required", 
       rightform_input2: "Field is required" 
      } 
     }); 
    } else { 
     rightForm.css("visibility", "hidden"); 
     leftForm.css("visibility", "visible"); 
     $.extend(settings, { 
      rules: { 
       leftform_input1: { required: true }, 
       leftform_input2: { required: true } 
      }, 
      messages: { 
       leftform_input1: "Field is required", 
       leftform_input2: "Field is required" 
      } 
     }); 
    } 
}); 

Answer 2

Mientras que hay otras maneras de hacer este ASP.net le permite usar múltiples etiquetas de formulario siempre que no se procesen todas, por lo que si usa una vista múltiple para mostrar solo el contenido relevante, puede usar múltiples formularios.

Tiende a limpiar la validación y enviar el manejo bastante.

---

Alternativamente jQuery sí permite: Visible a añadirse a su selector, por lo que potencialmente sólo se podía ejecutar el selector de elementos visibles y dejar de lado la cuestión de esa manera, dependiendo de la forma en que están ocultos.

Cómo se ve: visible se modificó en jQuery 1.3.2. Elemento asumido como visible si tanto él como sus padres consumen espacio en el documento. La visibilidad de CSS no se tiene en cuenta. Las notas de la versión describen los cambios con más detalle.

---

Aquí es una solución mejor/más simple desde otro puesto en la pila rebosan

Al parecer, la validación de plug-in le permite especificar: visible en las reglas. Aquí está el post

Advanced JQuery Validation: Avoiding Validations on Certain Conditions

Answer 3

Los "necesarios" declaraciones dentro del hash validate.rules no tienen que ser declaradas estáticamente como "verdadero". En realidad, puede proporcionar una función anónima que puede verificar la visibilidad de algo y devolver verdadero o falso según la respuesta.

$('form').validate({ 
rules: { 
    rightform_input1: { 
    required: function(){ 
       return $('#leftform').css("visibility") !== "hidden" 
       } }, 
    rightform_input2: { 
    required: function(){ 
       return $('#leftform').css("visibility") !== "hidden" 
       } } 
    } 
}); 

Answer 4

$('#form_id').validate();//empty rules 
//add rules/message to form element 
$('#form_id #inputId').rules("add", { 
    required  : true,        
    messages  : { 
     required : 'Add your required message' 
    } 
}); 

Answer 5

escribí pequeña función de reglas Editting (sólo es necesario).

 $.editRules = function($array, $type) { 
      var settings = $('#signupForm').validate().settings; 
      $.each($array, function($k, $v) { 
       settings.rules[$v] = {required: ($type == 'add' ? true : false)}; 
      }); 
     }; 

Answer 6

Si desea llamar a validar de nuevo con la nueva configuración (reglas, mensajes ... etc.) llamada

$('#formid').removeData('validator') 

Esto eliminará la validación para el formulario y luego inicializar de nuevo con la nueva configuración