Discussion :

[SpaceFrog]

Question récurrente s'il en est la soumission de formulaire après vérification semble poser problème à de nombreuses personnes.

Je ne traiterais ici que du principe de base de la validation, et non des différentes possibilité de vérification du contenu des champs, ni des messages d'erreurs de saise.

Voici le fonctionnement classique d'une vérification de formulaire avant envoi:


Tout d'abord la fonction de vérification:
Elle doit retourner true si tous les tests sont ok et false si non
si il y a plusieurs teste à effectuer le moyen le plus simpel est d'incrémenter une variable à chaque erreur et tester en fin de focntion si la variable est supérieure à 0

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
function VerifForm(){ var AllIsOk=0;
 
                             // ici une serie de tests : (exmple si les champs sont vides)
                       if(document.forms['myform'].elements['monchamps1'].value==''){AllIsOk++;}
                       if(document.forms['myform'].elements['monchamps2'].value==''){AllIsOk++;}
 
                             //ici le retour de la fonction
 
                             return (AllIsOk==0);  //retourne true si tous les champs sont remplis
                                                   //retourner false si un seul des champs est vide
}</script>

A noter que la syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return (AllIsOk==0);

est equivalente de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
if(AllIsOk==0){return true;}
else{return false}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
le formulaire
<form name="myform" action="javascript:alert('ok tout est bon ! Envoyé')" onsubmit="return VerifForm()" />
<input type='text' value='' name='monchamps1' />
<input type='text' value='' name='monchamps2' />
<input type='submit' value='envoyer' />
</form>

Ceci n'est bein entendu que la base, on peut ajouter des messages d'alert en retour avec les erreurs de saisies rencontrées, redonner le focus au champs incriminé etc ...

[Gatsu35]

Bonjour,
je me permet d'intervenir car il n'y a pas mal de petites choses à corriger et à améliorer dans ce que tu as montré.

- Afin d'avoir une plus grande souplesse, je te conseille de plutot passer le formulaire en paramètre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form onsubmit="return VerifForm(this)">

Apres ca permet d'eviter de se casser la tête à trainer un name sur le form, car de toute facon le name est deprecated sur les éléments (sauf champs de formulaire) et puis les éléments on les attaque par l'id de nos jour :
var form = document.getElementById('form');
revenons en à nous moutons, donc je disais que au final ta fonction ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function VerifForm(form) {
   form.elements['truc'].....
   form.elements['truc2']...
}

C'est beaucoup plus propre.


Ensuite idem pour les champs/éléments en règle général on les attaque par un id, mais pour notre cas c'est tout aussi bien de passer par le name.

Maintenant passons à l'amélioration de ton script.
Je propose qu'on passe par une classe pour valider les champs, ensuite la fonction elle viendra parcourir tous les champs et sortir une erreur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input type="checkbox" class="required" />
<input type="text" class="required" />

et ensuite le JS qui parcoureras tous les éléments du formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function VerifForm(form){ 
	var AllIsOk=0;
 
	for (var i=0; i<form.elements.length; i++) {
		var inp = form.elements[i]; //on recupere le champ dans une variable referente, cela evite de se trimballer avec 12ko de code :D
		if (inp.className.match(/\brequired\b/)) { //on check si l'élément a la classe required.
			switch(inp.type) { // s'il a la classe on regarde son type et on sort une erreur en fonction de son type
				case "text":  
				case "file":
				case "password":
				case "textarea":
					if (inp.value=="") AllIsOk++;
					break;
				case "checkbox":
				case "radio":
					if (!inp.checked) AllIsOk++;
					break;
				case "select-one":
				case "select-multiple":
					if(inp.selectedIndex==0) AllIsOk++;
					break;
			}
		}
	}
	return (AllIsOk++)
}

[SpaceFrog]

Mhhh à priori je n'ai pas été assez explicite, on m'a déja dit que ce "tuto" n'atteignais pas sa cible...
Reprenons:
Le propos est ici de montrer et expliciter le principe de base de vérification d'un form en passant comme il se doit par le onsubmit ...
avec une fonction de vérification qui retourne true ou false ...

Ensuite peu importe les paramètres passés à la fonction ou le type de vérifications réalisées ...
Il y a déja eu dans les contributions une fonction de validation générique très complète, sans doute un peu trop évoluée pour le débutants.

Je vais donc rappeler le principe de base de validation en javascript d'un formulaire en utilisant onsubmit:

Le formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<form action="page.htm" onsubmit="return fonctiondeVerifiaction()" />
....
<input type="submit" value="envoyer" />
</form>

lors du click sur le bouton de validation (ou appui sur la touche enter) la fonction de vérification est lancée avant l'envoi du formulaire ...
si la fonction retourne true le formulaire est envoyé
si la focntion retourne false l'envoi est stoppé.


La fonction de verification étant par exemple dasn le head de la page entre balises script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
</script type='text/javascript'>
fonctiondeVerifiaction(){
// ici les tests 
if( tout est ok){ return true}
else {return false}
}
</script>

Petit précaution à prendre avec ce type de vérification:
Le onsubmit n'est pas lancé lors d'une soumission dynamique du formulaire avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.forms[0].submit()

donc la vérification ne se fait pas, pour inclure le onsubmit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(document.forms[0].onsubmit()){document.forms[0].submit()}

En espérant avoir démystifié la validation de formulaire pour les débutants ..

[Gatsu35]

une petite petite erreur s'est glissée dans ta derniere ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
if(document.forms[0].onsubmit()){document.forms[0].onsubmit()}

qu'il faut corriger par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
if(document.forms[0].onsubmit()){document.forms[0].submit()}

Accessoirement il serait bien venu d'indiquer que les éléments HMTL ainsi que les FORMULAIRES s'attaquent par un ID, passer par un document.forms[0] est mauvais, dans le sens où si un autre formulaire existe avant la page, le JS ne fonctionne plus du tout, passer par le name n'est pas sensé non plus puisqu'un autre formulaire avec le meme name pourrait exister.

Donc la meilleur méthode
HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<form id="leformulaire">

JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var form = document.getElementById('leformulaire');
if(form.onsubmit()){form.onsubmit()}

sinon merci de bien te soucier des débutant, mais il faut aussi les mener vers les bonnes routes des le début (donc pousser l'utilisation de l'id et de getElementById par exemple).
En gros montrer des exemples avec du code DOM normalisé

[SpaceFrog]

Merci pour la correction, j'ai modifié dans le code ...

Pour ce qui est de document.forms[0] ...
il faut aussi mener les débutants sur la bonne route ...
En principe il n'est pas bon d'avoir plusieurs forms sur la même page ...

un seul form, plusieurs boutons submit et une modification de l'actin du form éventuellement...
MAsi encore une fois là n'est pas mon propos, je me limite à la vulgarisation de l'utilisation du onsubmit pour la validation du form

[Gatsu35]

heu quand tu dis qu'il n'est pas bon de ne pas avoir plusieur form, il faut bien indiquer aux débutant que :


- Si c'est un ensemble de champs : il faut 1 seul formulaire
- Oui on peut avoir plusieurs formulaires dans une page si ceux là sont bien distinct :
ex :
- formulaire de login dans le header
- formulaire de sondage dans une colonne à droite
- formulaire central dans la page pour une inscription (par exemple)

il peut arriver qu'on peut se retrouver avec une configuration telle qu'elle dans une page

[SpaceFrog]

Oui Gatsu

Bienque cela soit réalisable avec un seul et même form, il est plus simple et plus clair au niveau du code d'en utiliser plusieurs...

Et les forms imbriqués sont à proscrire.