jQuery validieren mit einer dynamischen Anzahl von Feldern

Question

Ich habe eine Form mit einer Bühne, die eine Anzahl von dynamischer Gruppen von Feldern hat, wo die Anzahl an Antworten in der vorhergehenden Stufe basiert.

ich die Felder Server-Seite als ein Array zu erzeugen, das heißt

<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 

Egal, die Zahl, werden alle Felder & erforderlich sind, muss ich auch gegen Art & Anzahl der Stellen in einigen Fällen validieren. Ich bin die jQuery validate plugin für die clientseitige Verarbeitung mit (ja, gesichert mit serverseitigen Sachen auch) & die Validierung nicht inline durchgeführt werden kann, wie die Form Strict passieren muss XHTML (EDIT: siehe meinen Nachtrag unten).

Mein Problem ist, dass ich nicht herausfinden kann, wie man mit einer dynamischen Anzahl von Feldern zu validieren verwenden. Hier ist, was die Validate Syntax sieht in der Regel für den Rest der Form:

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

Eigentlich sollte es funktionieren Wenn Sie Klassen anstelle der Initialisierung von Regeln als validate() -Optionen verwenden würden.

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

    } 

    }); 

}); 

Hoffnung das funktioniert. Sinan.

Answer 2

Keine Antworten so werde ich meine „interim“ Lösung veröffentlichen, die für die Inline-Validierungsregeln festgelegt ist ‚erforderlich‘ und ‚Typen‘ Wenn Sie "maxlength" der serverseitigen Überprüfung überlassen, zeigen Sie benutzerdefinierte Nachrichten mit einem integrierten Titel-Tag an.

Dies ist wahrscheinlich gut genug für die Zwecke dieses Jobs, aber ich bin immer noch neugierig, ob es eine Möglichkeit gibt, es "vollständig" innerhalb von jQuery zu tun.

Answer 3

Haben Sie custom class rules zu definieren, die xhtml unvereinbar Regeln zu verwenden versucht?

Das Beispiel in der docs verwendet nur eine Klasse, aber ich nehme an, Sie könnten verschiedene benutzerdefinierte Klassen kombinieren, um die Validierungsregeln zu erreichen, die Sie benötigen. Ich habe das nicht selbst ausprobiert.

Answer 4

fand ich einen Weg mit „Metadaten“ zu tun.

Dies sollte innerhalb einer Vorlage mit einem dynamischen Namen verwendet werden. Also muss ich den Namen nicht kennen.

Der Nachteil ist immer noch nicht möglich, den Code mit reinem Javascript mit sauberen Tags zu verwenden.

<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

Hier ist eine andere Möglichkeit, dies zu tun.

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