Nota:

Esta pregunta se refiere a una versión muy antigua de jQuery.validar() (versión 1.5). Este plugin ofrece ahora una solución integrada para hacer esto: la .reglamento() método que debe utilizarse en su lugar. Voy a dejar esta pregunta y la respuesta en su forma original para fines históricos para cualquier persona que necesita para mantener un legado sitio que no es capaz de actualizar a las últimas versiones de jQuery y jQuery.validate().


Tengo un formulario en el que se alterna lo que los elementos de entrada son visibles. Quiero validar sólo los elementos visibles en el formulario.

Estoy teniendo un tiempo difícil conseguir que esto funcione correctamente. Quiero deshabilitar los validadores para no visibles de los elementos y me parece que no puede averiguar la mejor manera de hacer esto. Cualquier información sobre lo que puede estar mal con mi código, o que mi planteamiento sería apreciada.

Cuando la visibilidad es controlado, yo he probado un par de cosas:

  • Llamar $("form").rules("remove") para borrar todas las reglas de validación. Esto produce una «undefined» JavaScript excepción.
  • Llamar $("form").validation(...options...) de los elementos visibles, con la esperanza de que esto podría sobrescribir las reglas. Esto sólo permite que el primer grupo que se valida a trabajar. El segundo panel no puede ser validado.
  • Desatar el controlador de envío antes de llamar a la nueva validation() método. Esta no hacer lo que yo hubiera pensado. Se elimina la validación (aparentemente) de forma permanente y el formulario envía sin validación.
  • De compensación a cabo la validación de objetos con $.removeData($('form'), 'validator') antes de intentar llamar al validador de nuevo. Esto también no funciona.
  • Esto es en un ASP.NET sitio, por lo que el uso de múltiples <form /> etiquetas está fuera de la cuestión, ya que rompería la página.

Estoy perplejo de cómo puedo hacer este trabajo. Usted puede ver una demo de lo que tengo en http://jsbin.com/ucibe3, o editarlo en http://jsbin.com/ucibe3/edit. He intentado tira hacia abajo de sólo el código que causa el error.

Aquí son las piezas claves de mi código (uso de enlaces anteriores para completar el trabajo de la página)

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"
            }
        });
    }
});
  • Lo siento, me perdí la marca con la otra respuesta, he añadido un enlace a una posible solución a mi post Espero que ayude.
  • 2014 – varias validador de plugins que existen ahora y, a pesar de que puede hacer una conjetura, no está claro que el plugin esta cuestión se refiere. Un enlace de las fuentes, sería útil.
  • Buen punto. He actualizado la pregunta y la respuesta para especificar el plugin, así como la versión de la que se aplica a esta pregunta & respuesta se refieren a una versión obsoleta del plugin y no es tan relevante por más tiempo.
  • Gracias Dan. StackOverflow es una víctima de su propio éxito en este sentido. A medida que el tiempo avanza más y más Qs/As se vuelven obsoletos.
InformationsquelleAutor Dan Herbert | 2009-10-02

6 Comentarios

  1. 69

    Obsoletos aviso:

    Esta respuesta se refiere a una muy antigua versión de la jQuery.validar() plugin (versión 1.5) y es ahora obsoleto como el plugin ofrece una API oficial para la solución de este problema. Ver el .reglamento() documentación para el enfoque actual para la resolución de este. Voy a dejar esta respuesta como-es ayudar a cualquier persona que debe mantener un legado sitio que no es capaz de actualizar a las últimas versiones de jQuery y jQuery.validate().


    Este utiliza una característica de la validador que no está bien documentado 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 el validador de obras, no es probable que ser eliminado, aunque es indocumentados.

    Una vez que se ha inicializado el jQuery validator, usted puede conseguir el acceso al objeto validador de nuevo llamando a la validate() método en el objeto de la forma de aplicar el validador. Este validador objeto tiene un settings de la propiedad, que almacena la configuración predeterminada, combinado con los ajustes aplicados en la inicialización.

    Suponiendo que yo inicializar el validador como este:

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

    Puedo llegar a esos valores exactos de la validador haciendo lo siguiente:

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

    Me puede fácilmente trabajar con este objeto de configuración para agregar o quitar los validadores para el formulario.

    Esta es la manera de quitar las reglas de validación:

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

    Y esta es la manera de 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 de mi pregunta. Yo uso jQuery extend() método para sobrescribir el rules y messages propiedades de la validate objeto, que es como lo de alternar 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"
                }
            });
        }
    });
    • Acabo de pasar un par de horas tratando de hacer algo similar, me alegra que haya publicado su solución. He encontrado la regla() método admite agregar o quitar reglas, pero no pude encontrar ninguna información sobre la adición de reglas y mensajes juntos. Su solución en el uso del objeto de configuración que funcionó muy bien! Gracias!
    • La ventaja de llamar la validate() método frente a sólo el acceso a $("form").data("validator").settings?
    • Si no validador ha sido creado para el formulario sin embargo, la llamada a data(...) volverá null. Llamar validate() más de una vez no tiene efectos secundarios, pero si el validador no se ha creado, sin embargo, va a crear una para usted.
    • Ah que tiene sentido, gracias.
    • Con la v1.13.0 del plugin, me parece que directamente puede establecer las reglas y los mensajes sin $.extender(). Acabo de almacenar los mensajes y reglas como objetos MyRules, MyMessages y ajustes de llamada.las reglas = MyRules; y la configuración.mensajes = MyMessages;
    • var validación = $(‘form’).validar(); Después de la llamada de validación.resetForm(); para borrar los errores existentes antes de cambiar los conjuntos de reglas. El establecimiento de las reglas se convierte en la validación.los ajustes.las reglas = MyRules;
    • Genial ! Estaba buscando esto por como 2 horas ahora.

  2. 16

    Si quieres llamar a validar de nuevo con nuevas opciones (normas,mensajes, etc…)
    llame

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

    Esto eliminará la validación del formulario y, a continuación, inicie de nuevo con la nueva configuración

    • Estaba buscando por todas partes para este!
    • ¿Esto de quitar todas las validaciones en el formulario? Cómo quitar sólo los que añadió como «rightform_input1»?
    • elimina todas las reglas, acerca de la extracción de sólo uno de comprobar qué datos se adjunta al formulario, no he usado jQuery en edades 🙂
  3. 13

    El «necesario» de las declaraciones dentro de validar.reglas de hash no tienen que ser declaradas estáticamente como «verdadero». Se puede suministrar en realidad una función anónima lugar que puede comprobar la visibilidad de algo y devolver true o false dependiendo de la respuesta.

    $('form').validate({
    rules: {
      rightform_input1: { 
        required: function(){
                  return $('#leftform').css("visibility") !== "hidden"
                  } },
      rightform_input2: {
        required: function(){
                  return $('#leftform').css("visibility") !== "hidden"
                  } }
      }
    });
    • Lo siento por downvote, fue un error y no me deja deshacer. 🙁
    • Usted necesita devolver un valor desde la función requerida.
  4. 5
    $('#form_id').validate();//empty rules
    //add rules/message to form element
    $('#form_id #inputId').rules("add", {
        required        : true,                             
        messages        : {
            required    : 'Add your required message'
        }
    });
  5. 4

    Escribí pequeña función para editar reglas (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)};
                });
            };
  6. 3

    Mientras que hay otras maneras de hacer esto ASP.net permite utilizar varias etiquetas form tanto tiempo como no todos son prestados – así que si usted utiliza un multi vista para mostrar el contenido relevante puede utilizar de múltiples formas.

    Tiende a limpiar la validación y presentar manejo bastante.


    Alternativamente jquery permite :visible para ser agregado a su selector, así que usted podría sólo ejecutar el selector en los elementos visibles y eludir el problema de esa manera, dependiendo de cómo se oculta.

    Cómo :visible es calculado fue cambiado en jQuery 1.3.2. Elemento asumido como visible si ella y sus padres se consume espacio en el documento. CSS visibilidad no es tomada en cuenta. Las notas de la versión describen los cambios en más detalle.


    Aquí es una mejor y más sencilla solución de otro post en stack overflow-

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

    Avanzados de JQuery Validación: Evitar las Validaciones en Ciertas Condiciones

    • Me gustaría considerar el uso de múltiples etiquetas form como usted menciona, sin embargo otros de validación, la página es completa y hay muchas cosas en la página, por lo que sería tener un montón de reestructuración de la página para que esta solución funcione.

Dejar respuesta

Please enter your comment!
Please enter your name here