jQuery Validation: Valider les champs générés dynamiquement uniquement sur le premier champ

Question

Oui, je sais que cette question a déjà été posée plusieurs fois. Mais je suis confus avec les réponses. Je pensais que je devrais en quelque sorte «actualiser» ou utiliser en direct pour ajouter la validation chaque fois que j'ajoute un nouveau champ de saisie.

Aussi j'ai vérifié le demo et je pense qu'il me manque quelque chose. Je ne vois pas vraiment de code qui ajoute une validation chaque fois qu'un nouveau champ est ajouté.

Ceci est une version simplifiée de mon code:

$(function(){ 
    $('#testform').validate(); 

    var input1 = $('<input type="text" class="required" />'): 
    var input2 = $('<input type="text" class="required" />'): 
    var input3 = $('<input type="text" class="required" />'): 

    $('#testform').append(input1) 
       .append(input2) 
       .append(input3); 
}); 

Mon HTML ressemble à ceci:

<form id='testform'> 
    <input type='submit' value='submit' /> 
</form> 

Pour une validation raison ne fonctionne que sur le premier élément. Si vous remplissez du texte, cela fonctionne sur l'événement onblur. Mais le formulaire sera soumis une fois que le premier champ de saisie aura du texte.

En fait, je pense que je viens de trouver la réponse tout en tapant ceci, mais je vais ajouter cette question de toute façon au cas où d'autres rencontreraient le même problème. Si c'est un problème, je vais l'enlever tout de suite.

Answer 1

La première chose que je ferais est d'attribuer un nom et un identifiant à chacun de vos éléments de texte et voir si cela fait une différence.

Aussi je pense que vous devez mettre votre $ ('# testform'). Validate(); à l'intérieur d'un bloc $(). ready (function() {} Cela force jQuery à ne pas lancer la validation du formulaire jusqu'à ce que la page soit prête (et complètement rendue par le navigateur)

Answer 2

Pour que la validation de jQuery fonctionne, vous devez ajoutez l'attribut name

il doit donc être:.

$(function(){ 
    $('#testform').validate(); 

    var input1 = $('<input name="one" type="test" class="required" />'): 
    var input2 = $('<input name="two" type="test" class="required" />'): 
    var input3 = $('<input name="thr" type="test" class="required" />'): 

    $('#testform').append(input1) 
       .append(input2) 
       .append(input3); 
}); 

Sur la page de validation jQuery:

l'attribut name est nécessaire pour inpu éléments t, le plugin de validation ne fonctionne pas sans elle. Habituellement, les attributs name et id doivent avoir la même valeur.

http://docs.jquery.com/Plugins/Validation/Reference