jQuery de Validation avec des champs qui sont ajoutés au formulaire dynamiquement

J'ai de la forme suivante:

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
</form>

qui est validé avec jQuery plugin de validation. Je l'appelle comme ceci:

$(".form-validation").validate();

La Validation fonctionne comme prévu. Ensuite, j'ai un bouton qui ajoute dynamiquement des champs au formulaire, fondamentalement, il crée ce:

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
  <input name="product[1][name]" id="form_product[1][name]" data-rule-required="true">
  <input name="product[2][name]" id="form_product[2][name]" data-rule-required="true">
  ...
</form>

Maintenant, après cette validation ne se comporte pas OK plus. - Il encore valide le formulaire, mais j'obtiens des résultats étranges. Parfois onsubmit valeur de filed3 est déplacé à champ2, et les règles sont passés entre les champs...

Je pense que j'aurais besoin de dire validateur que de nouveaux champs ont été ajoutés, mais je ne sais pas comment?

Quel plugin? Le "jQuery de Validation" plugin comme mentionné dans la question, ou le "jQuery Moteur de Validation" balisé? Ils sont deux choses différentes.
Basé sur le code .validate(), j'ai mis à jour vos tags.
Citation OP: "je obtenir des résultats étranges. Parfois onsubmit valeur de filed3 est déplacé à champ2, et les règles sont passés entre les champs" ~ Voir la deuxième partie de ma réponse ci-dessous. Vous avez dupliqué le id sur le deuxième et le troisième champ. id's doit être unique ou vous allez obtenir des résultats étranges, comme vous l'avez décrit.

OriginalL'auteur Primoz Rome | 2013-04-03

  1. 4

    À appliquer les règles de créer dynamiquement des champs, vous appelez la règles('ajouter') méthode immédiatement après vous créez les nouveaux champs de saisie. Puisque vous n'avez pas montrer le code qui ajoute de nouveaux champs, je ne peux pas vous montrer exactement démonstration de cette technique.

    TOUTEFOIS, étant donné que vos règles sont déjà une partie des attributs HTML, cette démo ci-dessous montre que votre code doit déjà être fonctionne bien:

    http://jsfiddle.net/WVbmj/

    Devis OP:

    Il toujours valide le formulaire, mais j'obtiens des résultats étranges. Parfois onsubmit
    la valeur de filed3 est déplacé à champ2, et les règles sont passés entre
    les champs ainsi.

    C'est probablement parce que vous avez un double id, id="form_product[1][name]", sur votre deuxième & troisième input éléments. id's doit être unique ou vous allez obtenir des résultats étranges comme ça. Résoudre ce problème comme je l'ai fait dans la démo ci-dessus.

    De nouveau, il travaille lorsque cette id problème est résolu: http://jsfiddle.net/WVbmj/

    Tous mes règles sont définies dans le code HTML de creux data-rule attributs comme vous le voyez ci-dessus dans ma question. J'appelle la validation $(".form-validation").validate();. J'ai essayé d'appeler .les règles ("ajouter") comme vous l'avez suggéré, avant même que j'ai ouvert cette question mais n'a pas été workign pour moi...
    veuillez lire le reste de ma question. Cette démo montre clairement votre code fonctionne bien et il semble que votre problème est causé par une duplication de id sur la seconde & troisième input élément.
    Bien les ID sont très bien, juste une faute de frappe ici... j'ai corrigé! Je vois que vous exemple et il fonctionne vraiment. Mais d'où vous appelez règles('ajouter'), que vous êtes de mentionner. Vous avez réellement sur ajouter un nouveau champ à DOM et rien d'autre... et ça marche?
    depuis votre input champs HTML contient le "inline" de la règle, vous n'aurez pas besoin d'utiliser rules('add')... suivez mon jsFiddle et l'examiner attentivement.
    oui correct, j'ai lu que tous les docs, mais n'a malheureusement pas fonctionné pour moi. Oui ma forme est un peu plus compliqué, j'ai plus de règles (en ligne) et le champ de nommage est comme je l'ai montré à ma question. La seule chose c'est que je utiliser jQuery pour clone jeu de champs existant, et au moment de l'exécution de modifier les noms de champ et les ID... Peut-être que cela freins quelque chose sur le chemin, mais en conséquence, les noms de champ de formulaire et les pièces d'identité sont certainement très bien! Je vais essayer de re-vérifier tout pour la 10e fois :).

    OriginalL'auteur Sparky

  2. 0

    Afin de valider la dynamique des champs-nous besoin d'ajouter de la classe de contrôle dynamique et l'ajouter à la règle, il

    et nous avons besoin de le répéter pour chaque opération d'ajout..

    <input id="Name" name="Name" type="text" class="netEmp form-control">

    pour plus d'informations, cliquez ici http://www.dotnetqueries.com/Article/136/jquery-validate-dynamically-added-fields

    OriginalL'auteur DotNetLover

  3. 0

    Vous devez définir le nom de classe de même pour tous les champs.

    Par exemple:

    <input class="form-control amount validate_form" name="amount[]" type="text">
<p class="validateError" style="color:red;display:none;">please enter amount.</p>
<button type="submit" id="fees_stream_submit" class="btn btn-primary">Submit</a>

<script type="text/javascript">
            $(document).on('click', '#fees_stream_submit', function(e){
              e.preventDefault();
                $(".validate_form").each(function() {
                    var selectedTr = $(this);
                    i =0;
                    var value = $(this).val();
                    if (!value) {
                        selectedTr.next("p").show();
                        i++;
                    } else {
                        selectedTr.next("p").hide();
                    }
                });

                if (i == 0) {
                    $('#fees_stream_form').submit();
                }
            });
        </script>

    OriginalL'auteur Mani