jQuery Validez plusieurs champs avec le même nom

J'ai ce formulaire avec les entrées avec le même nom mais similaires (en incrémental) id.

Je veux le formulaire afin de valider si il y a un nom sur la personne, l'âge doit être obligatoire..

Ce qui se passe maintenant, c'est que seule la première entrée est obligatoire.

Voici mon code:

<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
<form id="people">
<div class="section">
<input id="person1" name="person" class="person" type="text" placeholder="First Name" />
<input id="age1" name="age" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person2" name="person" class="person" type="text" placeholder="First Name" />
<input id="age2" name="age" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person3" name="person" class="person" type="text" placeholder="First Name" />
<input id="age3" name="age" class="age" type="text" placeholder="Age" />
</div>
...
<input type="submit" id="submit" name="submit" value="Add" />
</form>
<script type="text/javascript">
$(function(){
$('#people').validate();
$('#submit').click(function(){
$('[id^="person"]').each(function(){
if ($(this).val().length>0){
//alert($(this).val());
//alert($(this).parent().find('.age').val());
$(this).rules('add', {
required: true,
minlength: 2,
messages: {
required: "Specify the person name",
minlength: "Minimum of 2 characters"
}
});
$(this).parent().find('.age').rules('add', {
required: true,
number: true,
messages: {
required: "Must have an age",
number: "Specify a valid age"
}
});
}
});
});
});
</script>
</body>

source d'informationauteur Francisco Tomé Costa

  1. 11

    Le jQuery plugin Validator ne prend pas en charge plusieurs champs portant le même nom-de-la-case. Vous aurez besoin de modifier la source du plugin pour vérifier les champs comme vous le souhaitez.

    Voir cette réponse à une question similaire pour le contourner.

  2. 0

    Amis!

    Afin de valider la zone de texte avec le même nom, utilisez ce qui suit, il fonctionne très bien pour moi. en plus, Pas besoin de déclarer un paramètre d'entrée sous la forme de tableaux.

    Ici "minVal' est le nom de la zone de texte.
    de même, pour déroulante utiliser document.getElementsByTagName("select");'

    function validateMinimumVal(){
inp = document.getElementsByTagName("TEXT");
for ( var i = 0; i < inp.length; ++i )    {
if (inp[i].name =="minVal" && inp[i].value==''){
alert('plesae Add a MINIMUM VALUE!!');
return false;
}
}
return true;
}

    Espérons que cette aide!!
    Jagan

  3. -5
        <div class="section">
<input id="person1" name="person[]" class="person" type="text" placeholder="First Name" />
<input id="age1" name="age[]" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person2" name="person[]" class="person" type="text" placeholder="First Name" />
<input id="age2" name="age[]" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person3" name="person[]" class="person" type="text" placeholder="First Name" />
<input id="age3" name="age[]" class="age" type="text" placeholder="Age" />
</div>

    Vous devez ajouter des crochets et boucle à travers le tableau.