jQuery validieren mit einer dynamischen Anzahl von Feldern

Question

Ich habe ein Formular mit einer Bühne, die eine dynamische Anzahl von Gruppen von Feldern hat, wo die Zahl auf Antworten in der vorherige Stufe basiert.

Ich bin Erzeugung der Felder serverseitige als Array, d.

<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 Anzahl, alle Felder werden benötigt und ich muss auch gegen Art und Anzahl der Stellen in einigen Fällen validieren. Ich bin mit dem jQuery-Plugin Verarbeitung für die clientseitige Validierung (ja, gesichert mit server- seitigen Teil auch) & die Validierung nicht inline erfolgen, wie die Form Strenge passieren muss XHTML (EDIT: s. mein Nachtrag unten)

Mein Problem ist, dass ich nicht herausfinden kann, wie man mit einer dynamischen Anzahl von Feldern Validate 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 statt Initialisierung 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" 
            }

    }

  });

});

hoffen, dass dies funktioniert. Sinan.

Answer 2

Haben Sie benutzerdefinierten Klassenregeln definieren die xhtml zu verwenden versucht unvereinbar Regeln?

Das Beispiel in der docs verwendet nur eine Klasse, aber ich nehme an Sie können verschiedene benutzerdefinierte Klassen kombinieren, um die Validierungsregeln, die Sie erreichen müssen. Ich habe das nicht für mich selbst versucht.

Answer 3

Keine Antworten so werde ich meine „interim“ Lösung veröffentlichen, die für die Inline-Validierungsregeln festgelegt ist ‚erforderlich‘ und ‚Typ‘, ‚maxlength‘ auf serverseitige Überprüfung zu verlassen, zeigt dann benutzerdefinierte Nachrichten mit einem Inline-Titel Etikett.

Dies ist wahrscheinlich gut genug für die Zwecke dieser Arbeit, aber ich bin immer noch neugierig, ob es einen Weg gibt, es zu tun ‚vollständig‘ im jQuery.

Answer 4

Hier ist eine andere Art und Weise, 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;
        } 
    }
});

Answer 5

Ich fand einen Weg mit „Metadaten“ zu tun.

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

Der Nachteil ist noch nicht möglich, den Code mit reinem Javascript mit sauberem 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"); 
});