Comment valider le tableau des entrées en utilisant le plugin valider jquery

Vous pouvez passer une option pour ignorer une partie d'un nom de champ; comme pour les commentaires de messages originaux, il y a beaucoup de cas d'utilisation pour avoir un nom[] nom de style en HTML, en particulier en utilisant PHP.

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

j'ai remarqué que le jQuery valider plugin-je utiliser seulement détecter le premier élément avec un nom spécifique.

une autre façon de faire valider le plugin jQuery détecte aussi toutes les entrées au-delà de la première pourrait être en rendant les noms uniques. Vous pouvez donc 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]" />

C'est la Meilleure solution que j'ai trouvé et je suis actuellement aide 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
    });
});

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

ci-dessous est 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 le code jquery est en dessous de

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

tout d'abord, pour jQuery pour distinguer entre les éléments, vous devez avoir un id différent par élément. Cela peut être fait programmatiquement lorsque vous ajoutez les entrées. Ensuite, ce que vous devez faire est de vérifier toutes les entrées avec nom commun à la fois. 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 cette règle sur votre tableau elements :

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

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

Pour les erreurs apparaissent correctement sur les champs vides cependant, vous pouvez avoir besoin de surcharger l'option errorPlacement de validate...

Voici la solution sans donner d'indexation à array.

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

Code js

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

jQuery form Validator est un plugin jQuery riche et multilingue qui permet de valider facilement les entrées de l'utilisateur tout en gardant votre balisage HTML propre à partir du code javascript. Même si ce plugin dispose d'une large gamme de fonctions de validation, il est conçu pour nécessiter le moins de trafic réseau jQuery possible. Pour ce faire, on regroupe les fonctions de validation en "modules", ce qui permet de ne charger que les fonctions nécessaires à la validation d'un forme.

<form action="" id="registration-form">
  <p>
    E-mail
    <input name="email" data-validation="email">
  </p>
  <p>
    User name
    <input name="user" data-validation="length alphanumeric" 
         data-validation-length="3-12" 
         data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
  </p>
  <p>
    Password
    <input name="pass_confirmation" data-validation="strength" 
         data-validation-strength="2">
  </p>
  <p>
    Repeat password
    <input name="pass" data-validation="confirmation">
  </p>
  <p>
    Birth date
    <input name="birth" data-validation="birthdate" 
         data-validation-help="yyyy-mm-dd">
  </p>
  <p>
    Country
    <input name="country" id="country" data-validation="country">
  </p>
  <p>
    Profile image
    <input name="image" type="file" data-validation="mime size required" 
         data-validation-allowing="jpg, png" 
         data-validation-max-size="300kb" 
         data-validation-error-msg-required="No image selected">
  </p>
  <p>
    User Presentation (<span id="pres-max-length">100</span> characters left)
    <textarea name="presentation" id="presentation"></textarea>
  </p>
  <p>
    <input type="checkbox" data-validation="required" 
         data-validation-error-msg="You have to agree to our terms">
    I agree to the <a href="..." target="_blank">terms of service</a>
  </p>
  <p>
    <input type="submit" value="Validate">
    <input type="reset" value="Reset form">
  </p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>

  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });

  // Restrict presentation length
  $('#presentation').restrictLength( $('#pres-max-length') );

</script>
...