jQuery convalida con un numero dinamico di campi

Question

Ho un modulo con uno stage che ha un numero dinamico di gruppi di campi, in cui il numero è basato sulle risposte nella fase precedente.

sto generando il campo sul lato server come una matrice, vale a dire

<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 

Non importa il numero, tutti i campi sono obbligatori & Ho anche bisogno di convalidare contro il tipo & numero di cifre in alcuni casi. Sto usando lo jQuery validate plugin per l'elaborazione lato client (sì, ho eseguito il backup anche con il lato server) & la convalida non può essere eseguita in linea poiché il modulo deve passare XHTML Strict (EDIT: vedere la mia aggiunta di seguito).

Il mio problema è che non riesco a capire come utilizzare la convalida con un numero dinamico di campi. Ecco cosa la sintassi validate si presenta tipicamente come per il resto del modulo:

$(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

in realtà dovrebbe funzionare Se si usassero classi invece di inizializzare regole come opzioni 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" 
      } 

    } 

    }); 

}); 

speranza questo funziona. Sinan.

Answer 2

Nessuna risposta quindi vi posto la mia soluzione "ad interim", che è quello di impostare le regole di convalida in linea per e 'di tipo' 'necessaria' lasciando "maxlength" al controllo sul lato server, quindi visualizza messaggi personalizzati con un tag title in linea.

Questo è probabilmente abbastanza buono per gli scopi di questo lavoro, ma sono ancora curioso di sapere se c'è un modo per farlo 'completamente' all'interno di jQuery.

Answer 3

Hai provato a utilizzare custom class rules per definire le regole incompatibili xhtml?

L'esempio nello docs utilizza solo una classe, ma suppongo che sia possibile combinare diverse classi personalizzate per ottenere le regole di convalida necessarie. Non ho provato questo per me stesso.

Answer 4

Ho trovato un modo per utilizzare "metadati".

Questo deve essere utilizzato all'interno di un modello con un nome dinamico. Quindi, non ho bisogno di sapere il nome.

Lo svantaggio non è ancora possibile utilizzare il codice con puro javascript con tag puliti.

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

Answer 5

Ecco un altro modo per farlo.

/* 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; 
     } 
    } 
});