Validation de saisie de plusieurs select avec le même name

Version imprimable

Bonjour,

Je bloque sur un élément, et j'aurai besoin de votre aide s'il vous plaît :

en effet, j'essaye de vérifier que les selects qui ont le même name sont bien sélectionnés avec une option. Avec mon script, je réussis à vérifier le premier select, mais je bloque pour le deuxième select, mon script ne prends pas en compte celui-ci.

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<table id="rma_create_form" method="post">
<tr class="detailsRma-1">
	<td>
		<label for="reason" class="label required">Reason for return<em>*</em> :</label><br>
 
		<select class="validate-select" id="reason-1" name="reason">
			<option value=""></option>
			<option value="1">No particular reason</option>
			<option value="2">delivery erro</option>
			<option value="3">bad size</option>
			<option value="4">defective</option>
			<option value="5">other reason</option>
		</select>
	</td>
 
	<td>
		<label for="exchange" class="label required">Do you want an exchange or a refund ?<em>*</em> :</label>
		<select class="validate-select" id="exchange-1" name="exchange">
			<option value=""></option>
			<option value="1">refund on your method of payment</option>
			<option value="2">coupon on online customer accoun</option>
			<option value="3">purchase on invoice</option>
		</select>
	</td>
</tr>
<tr class="detailsRma-2">
	<td>
		<label for="reason" class="label required">Reason for return<em>*</em> :</label><br>
 
		<select class="validate-select" id="reason-2" name="reason">
			<option value=""></option>
			<option value="1">No particular reason</option>
			<option value="2">delivery erro</option>
			<option value="3">bad size</option>
			<option value="4">defective</option>
			<option value="5">other reason</option>
		</select>
	</td>
 
	<td>
		<label for="exchange" class="label required">Do you want an exchange or a refund ?<em>*</em> :</label>
		<select class="validate-select" id="exchange-2" name="exchange">
			<option value=""></option>
			<option value="1">refund on your method of payment</option>
			<option value="2">coupon on online customer accoun</option>
			<option value="3">purchase on invoice</option>
		</select>
	</td>
</tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery(document).ready(function(){
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        jQuery("#rma_create_form").validate({
            rules: {
                reason: "required",
                exchange: "required"
            },
            messages: {
                reason: "Please select a reason for your resend",
                exchange: "Please enter the type of refund desired"
            },
        });
    });

Merci d'avance pour votre aide !

17/09/2019, 16h02
Invité

Bonjour,

1- déjà, il faudrait que le code HTML soit valide.

Code:

<table id="rma_create_form" method="post">

?? 8O

2- La seule manière d'avoir plusieurs champs avec le même name, c'est de mettre des crochets :
name="reason" -> name="reason[]".

3- Par contre, je ne connais pas jQuery.validator.

J'ai essayé avec les crochets mais sans succès, y-a t-il une action supplémentaire à faire?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<form id="rma_create_form" method="post" action="...">
<table>
<tr class="detailsRma-1">
	<td>
		<label for="reason" class="label required">Reason for return<em>*</em> :</label><br>
 
		<select class="validate-select" id="reason-1" name="reason[]">
			<option value=""></option>
			<option value="1">No particular reason</option>
			<option value="2">delivery erro</option>
			<option value="3">bad size</option>
			<option value="4">defective</option>
			<option value="5">other reason</option>
		</select>
	</td>
 
	<td>
		<label for="exchange" class="label required">Do you want an exchange or a refund ?<em>*</em> :</label>
		<select class="validate-select" id="exchange-1" name="exchange[]">
			<option value=""></option>
			<option value="1">refund on your method of payment</option>
			<option value="2">coupon on online customer accoun</option>
			<option value="3">purchase on invoice</option>
		</select>
	</td>
</tr>
<tr class="detailsRma-2">
	<td>
		<label for="reason" class="label required">Reason for return<em>*</em> :</label><br>
 
		<select class="validate-select" id="reason-2" name="reason[]">
			<option value=""></option>
			<option value="1">No particular reason</option>
			<option value="2">delivery erro</option>
			<option value="3">bad size</option>
			<option value="4">defective</option>
			<option value="5">other reason</option>
		</select>
	</td>
 
	<td>
		<label for="exchange" class="label required">Do you want an exchange or a refund ?<em>*</em> :</label>
		<select class="validate-select" id="exchange-2" name="exchange[]">
			<option value=""></option>
			<option value="1">refund on your method of payment</option>
			<option value="2">coupon on online customer accoun</option>
			<option value="3">purchase on invoice</option>
		</select>
	</td>
</tr>
</table>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery(document).ready(function(){
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        jQuery("#rma_create_form").validate({
            rules: {
               "reason[]": "required",
                "exchange[]": "required"
            },
            messages: {
                "reason[]": "Please select a reason for your resend",
                "exchange[]": "Please enter the type of refund desired"
            },
        });
    });

A tester :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
jQuery(document).ready(function(){
  jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
  });
  jQuery("#rma_create_form").validate({
    rules: {
      "reason[]": {
        required: true,
        minlength: 2
      },
      "exchange[]": {
        required: true,
        minlength: 2
      }
    },
    messages: {
      "reason[]": "Please select a reason for your resend",
      "exchange[]": "Please enter the type of refund desired"
    },
  });
});

Sinon, il faut mettre des name différents.

Salut,

Lorsqu'on utilise les crochets [] dans l'attribut name, jQuery Validator ne sélectionne que le premier élément trouvé de rules, il faut ajouter une fonction spéciale pour qu'il puisse sélectionner tous les éléments.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
$(document).ready(function() {
 
  jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
  });
 
  $.validator.prototype.checkForm = function() {//la fonction checkForm a ajouter (pur javascript)
    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();
  };
 
  $("#rma_create_form").validate({
    rules: {
      'reason[]': 'required',
      "exchange[]": 'required'
    },
    messages: {
      "reason[]": "Please select a reason for your resend",
      "exchange[]": "Please select an exchange"
    }
 
  });
});

Edit : ou bien écrire la fonction avec la syntaxe jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
 
 $.validator.prototype.checkForm = function(f) {//fonction  a ajouter
    var this_=this;
    this_.prepareForm();
    $("[name='reason[]'],[name='exchange[]']")
    .each(function(){
    	this_.check($(this));
    });
    return this_.valid();
  };

18/09/2019, 08h28
SpaceFrog

Code:

input[name=" ... "]').each(function() {