web-dev-qa-db-fra.com

Comment valider un tableau d'entrées à l'aide du plugin de validation jquery

Suis nouveau pour le plugin de validation jquery mais je voudrais savoir comment valider un tableau de boîtes d’entrée à l’aide du plugin de validation.

Ci-dessous, le code html.

<form id="transport-form">
  <input type="text" name="qty[]" id="qty1">
  <input type="text" name="qty[]" id="qty2" >
  <input type="text" name="qty[]" id="qty3">
  <input type="text" name="qty[]" id="qty4">
  <input type="submit value="submit">
</form>

et jquery code est ci-dessous

jQuery("#transport-form").validate({
        rules: {
            'qty[]': {
                required: true
            }
        },
    });

Mais chaque fois que je clique sur Envoyer, cela ne valide que la première valeur. reste toutes les valeurs du même nom ne sont pas validées. S'il vous plaît aider.

jqueryvalidationjquery-validate
22
Amit

Parfois, nous devons valider un tableau d'éléments d'entrée: Par exemple -

<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
    <select name="category[]" id="cat_1">
    <option value="">Select One</option>
    <option value="1">aa</option>
    <option value="2">bb</option>
    <option value="3">cc</option>
    <option value="4">dd</option>
    </select>

    <select name="category[]" id="cat_2">
    <option value="">Select One</option>
    <option value="5">ee</option>
    <option value="6">ff</option>
    <option value="7">gg</option>
    <option value="8">hh</option>
    </select>

    <select name="category[]" id="cat_3">
    <option value="">Select One</option>
    <option value="9">ii</option>
    <option value="10">jj</option>
    <option value="11">kk</option>
    <option value="12">ll</option>
    </select>

    <input class="submit" type="submit" value="Submit">
    </form>

Nous allons maintenant utiliser le plugin de validation jquery jquery.validate.js pour valider le formulaire. La condition sera que l'utilisateur devra choisir une catégorie dans chaque liste déroulante. Le script de validation sera comme ci-dessous -

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    // validate the comment form when it is submitted
    $("#signupForm").validate({
        rules: {
            "category[]": "required"
        },
        messages: {
            "category[]": "Please select category",
        }
    });
});
</script>

Maintenant, le problème est que le readymade jquery.validate.js ne valide que le premier élément de la catégorie []. Nous devons donc le modifier un peu.

Dans jquery.validate.js, nous pouvons trouver une fonction appelée checkForm, nous devons la modifier comme suit:

checkForm: function() {
    this.prepareForm();
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
        if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
            for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
                this.check(this.findByName(elements[i].name)[cnt]);
            }
        } else {
            this.check(elements[i]);
        }
    }
    return this.valid();
}

Je viens de recevoir cette solution de http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/ espérons que cela aide quelqu'un ..

36
Amit

Vous pouvez passer une option pour ignorer une partie du nom d'un champ. En ce qui concerne les commentaires des publications originales, il existe de nombreux cas d'utilisation d'un nom de style nom [] en HTML, en particulier avec PHP.

$("#my-form").validate({
  submitHandler: function(form) {
    form.submit();
  },
  ignore: [],
  rules: {
    'category[]': {
      required: true
    }
  }
});
14
Christo

J'ai remarqué que le plugin de validation jQuery que j'utilise ne détectera que le premier élément portant un nom spécifique.

Un autre moyen de faire en sorte que le plug-in de validation jQuery détecte également toutes les entrées au-delà de la première consiste à rendre les noms uniques. Pour que vous puissiez remplacer:

<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />

avec:

<input type="text" name="qty[0]" />
<input type="text" name="qty[1]" />
<input type="text" name="qty[2]" />
<input type="text" name="qty[3]" />
8
Quinten

C’est la meilleure solution que j’ai trouvée et que j’utilise actuellement dans mon projet:

// Adding rule to each item in qtyi list 
jQuery('[id^=qty]').each(function(e) {
    jQuery(this).rules('add', {
        minlength: 2,
        required: true
    });
});
7
Chris Sim

Premièrement, pour que jQuery distingue les éléments, vous devez avoir un identifiant différent par élément. Cela peut être fait par programme lorsque vous ajoutez les entrées . Ensuite, vous devez vérifier toutes les entrées avec le même nom en même temps. Pour cela, créez un validateur personnalisé en utilisant la fonction addMethod () comme décrit dans la documentation

jQuery.validator.addMethod("allRequired", function(value, elem){
        // Use the name to get all the inputs and verify them
        var name = elem.name;
        return  $('input[name="'+name+'"]').map(function(i,obj){return $(obj).val();}).get().every(function(v){ return v; });
    });

Vous pouvez utiliser ceci comme règle sur vos éléments de tableau:

$('form').validate(
        {
         rules: { 
               "nbPieces[]": "allRequired"
         },

         submitHandler : function(form, event) {
              event.preventDefault();   
              //... etc
         }
});

Pour que les erreurs apparaissent correctement sur les champs vides, vous devrez peut-être remplacer l'option errorPlacement de valider ...

2
Eva M

Vous devez faire l'indexation de chaque élément 

Ci-dessous, le code html.

<form id="transport-form">
  <input type="text" name="qty[0]" id="qty1">
  <input type="text" name="qty[1]" id="qty2" >
  <input type="text" name="qty[2]" id="qty3">
  <input type="text" name="qty[3]" id="qty4">
  <input type="submit value="submit">
</form>

et jquery code est ci-dessous

jQuery("#transport-form").validate({
    rules: {
        'qty[]': {
            required: true
        }
    },
});
2
Ajay Patidar

Voici la solution sans donner d'indexation à un tableau.

<form>
    <div>Name:
       <p>
        <input name="name_ct[]" id="id_ct0" type="text" class="form-control" placeholder="Add Variant 1 Name">
        </p>
    </div>
    <input type="button" value="Add Variant" />
    <input type="submit" />
</form>

js Code

$(document).ready(function () {
 $.validator.addMethod("mytst", function (value, element) {
        var flag = true;

      $("[name^=name_ct]").each(function (i, j) {
                        $(this).parent('p').find('label.error').remove();
$(this).parent('p').find('label.error').remove();                        
                        if ($.trim($(this).val()) == '') {
                            flag = false;

                            $(this).parent('p').append('<label  id="id_ct'+i+'-error" class="error">This field is required.</label>');
                        }
                    });


                    return flag;


    }, "");
$("form").validate({

    ignore: '',
    rules: {
        "name_ct[]": {
            mytst:true
        }
    },
    submitHandler: function () {
        //you can add code here to recombine the variants into one value if you like, before doing a $.post
         form.submit();
        alert('successful submit');
        return false;
    }
});

var j = 1;
$('input[type="button"]').click(function () {
    $('form div').append('<p><input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant ' + j + ' Name " ></p>');

    j++;
});
});

vous pouvez voir ici dans js fiddle: https://jsfiddle.net/q0d76aqx/42/

1
shankit

J'ai utilisé la solution proposée par AsgarAli Khanusiya mais JQuery.Validator affiche le libellé avec le message d'erreur dans les mêmes cas, au mauvais endroit. Cela se produit car il stocke les messages précédemment affichés. Si l'utilisateur commet la même erreur avec un élément différent de la collection, le validateur affiche le libellé à la place précédente au lieu de générer un nouveau libellé près de l'élément avec le problème. J'ai remplacé la méthode 'errorsFor' pour résoudre ceci:

$.validator.prototype.errorsFor = function (element) {
    var name = this.idOrName(element);
    var elementParent = element.parentElement;
    return this.errors().filter(function() {
        return $(this).attr('for') == name && $(this).parent().is(elementParent);
    });
}
0
Pavel