jQuery validar con un número dinámico de campos

Question

Tengo un formulario con una etapa que tiene un número dinámico de grupos de campos, donde el número se basa en las respuestas de la etapa anterior.

Estoy generando los campos del lado del servidor como una matriz, es decir,

<input id="foo[0]"...
<input id="bar[0]"...

<input id="foo[1]"...
<input id="bar[1]"...

<input id="foo[2]"...
<input id="bar[2]"... etc

No importa el número, todos los campos son obligatorios & amp; También necesito validar contra tipo & amp; número de dígitos en algunos casos. Estoy usando el jQuery validate plugin para el procesamiento del lado del cliente (sí, respaldado con servidor- cosas laterales también) & amp; la validación no se puede hacer en línea ya que el formulario debe pasar XHTML Strict (EDITAR: vea mi apéndice a continuación).

Mi problema es que no puedo resolver cómo usar validar con un número dinámico de campos. Así es como se ve normalmente la sintaxis de validación para el resto del formulario:

$(document).ready(function() {

    // validate stage_form on keyup and submit
    var validator = $("#form_id").validate({

        // rules for field names
        rules: {

            name: "required", 
            address: "required",
            age: { required: true, number: true }

        },

        // inline error messages for fields above
        messages: {

            name: "Please enter your name", 
            address: "Please enter your address",
            age: { required: "Please enter your age", number: "Please enter a number" }

        }

    });

});

Answer 1

en realidad debería funcionar si usaras clases en lugar de inicializar reglas como opciones validate ().

Markup:

<input id="foo[0]" class="required"
<input id="bar[0]" class="required number"

<input id="foo[1]" class="required"
<input id="bar[1]" class="required email"

jQuery:

$(document).ready(function() {

  var validator = $("#form_id").validate({
    messages: {
            name: "Please enter your name", 
            address: "Please enter your address",
            age: { 
               required: "Please enter your age", 
               number: "Please enter a number" 
            }

    }

  });

});

espero que esto funcione. Sinan.

Answer 2

¿Ha intentado usar reglas de clase personalizadas para definir el xhtml incompatible reglas?

El ejemplo en docs solo usa una clase, pero supongo podría combinar diferentes clases personalizadas para lograr las reglas de validación que necesita. No he probado esto por mí mismo.

Answer 3

No hay respuestas, así que publicaré mi " interino " solución, que consiste en establecer reglas de validación en línea para 'requerido' y 'tipo', dejando 'maxlength' para la verificación del lado del servidor, luego mostrar mensajes personalizados con una etiqueta de título en línea.

Esto probablemente sea lo suficientemente bueno para los propósitos de este trabajo, pero todavía tengo curiosidad por saber si hay una manera de hacerlo 'completamente' dentro de jQuery.

Answer 4

Aquí hay otra forma de hacer esto.

/* Normal validate initialisation. */
$('#myForm').validate({

    /* Use the submitHandler method to add custom-selector-based validation. */
    submitHandler: function(form, ev) {

        /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form's pre-edit state. */
        var el = $('#selector');

        /* Do your custom validation. */
        if (  el.val() !== 'A'  ) {

            /* Show any errors:- 'fieldname': 'error message'. */
            this.showErrors({
                'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue'
            });

            /* Prevent form submission. */
            return;
        } 
    }
});

Answer 5

Encontré una manera de hacerlo usando "metadatos".

Esto debe usarse dentro de una plantilla con un nombre dinámico. Por lo tanto, no necesito saber el nombre.

La desventaja aún no es posible usar el código con JavaScript puro con etiquetas limpias.

<script src="jquery.metadata.js" type="text/javascript"></script>

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[  myRandomNumber ]"type="text" class="input_normal" />

 $( function() {
     // setup stuff
     $.metadata.setType("attr", "validate"); 
});