Table des matières
Niveau
..........
En rapport...

Vérifier et récupérer les valeur d'un formulaire en javascript

Voici une fonction qui vous permettra de vérifier si les champs (input, textarea et select) que vous avez définis comme obligatoire sont bien remplis.
L'utilisation est simple. Ils vous suffit de définir la même classe pour tous les champs de formulaires obligatoire et d'appeler la fonction.
Dans nos exemples, on utilise comme classe : “OBLI”

La fonction

javascript
//converti une collection en Array
function collectionToArray(col) {
	a = new Array();
	for (i = 0; i < col.length; i++)
		a[a.length] = col[i];
	return a;
}
Array.prototype.in_array = function(valeur) {
	for (var i in this) { if (this[i] == valeur) return i;}
	return -1;
}
function verifChamp(idForm,selector) {
	monForm=document.getElementById(idForm);
	lst=collectionToArray(monForm.getElementsByTagName('input'));
	lst=lst.concat(collectionToArray(monForm.getElementsByTagName('select')));
	lst=lst.concat(collectionToArray(monForm.getElementsByTagName('textarea')));
	var lstVar=[];
	lstVar['valide']=[];
	lstVar['invalide']=[];
	lstVar['neutre']=[];
	lstVar['all']=[];
	var dejaTraite=[];
 
	for (i=0;i<lst.length;i++) {
		lstVar['all'].push(lst[i]);
		if (dejaTraite.in_array(lst[i].name)!=-1)
			continue;
		if (lst[i].className.indexOf(selector)!=-1){
			if ((lst[i].type.toLowerCase()=="radio") || (lst[i].type.toLowerCase()=="checkbox")) {
				var lstN = document.getElementsByName(lst[i].name);
				var invalide=true;
				for (j=0;j<lstN.length;j++) {
					if (lstN[j].checked) {
						invalide=false;
						break;
					}
				}
				if (invalide)
					lstVar['invalide'].push(lst[i]);
				else
					lstVar['valide'].push(lst[i]);
 
			} else {
				if (lst[i].value=="")
					lstVar['invalide'].push(lst[i]);
				else
					lstVar['valide'].push(lst[i]);
			}
 
		} else {
			lstVar['neutre'].push(lst[i]);
		}
		dejaTraite.push(lst[i].name);
	}
	return lstVar;
}
La fonction verifChamp() vous renvois un Array a plusieurs dimensions.
tableau['valide'] contiendra un tableau avec la liste des champs valides.
tableau['invalide'] contiendra un tableau avec la liste des champs invalides.
tableau['neutre'] contiendra un tableau avec la liste des champs non obligatoire.
Exemple de sortie :

javascript
tbl['valide'][0]=InputObject
tbl['invalide'][0]=InputObject
tbl['invalide'][1]=SelectObject
tbl['neutre'][0]=InputObject

un 3eme sous tableau contient tous les champs de votre formulaire : tableau['all']

javascript
tbl['all'][0]=InputObject
tbl['all'][1]=InputObject
tbl['all'][2]=SelectObject

Exemple

html4strict
<script type="text/javascript">
function test() {
ret=verifChamp('idFormulaire','OBLI');
alert ("nombre de champs obligatoire rempli :"+ret['valide'].length);
alert ("nombre de champs obligatoire non rempli :"+ret['invalide'].length);
alert ("nombre de champs neutre dans le formulaire :"+ret['neutre'].length);
alert ("nombre de champs du formulaire :"+ret['all'].length);
}
</script>
<form id="idFormulaire" name="" action="" method="post" enctype="multipart/form-data">
test1<input type="text" name="test1" class="OBLI" /><br />
test2<input type="text" name="test2" class="OBLI" /><br />
test3<input type="text" name="test3" /> <br />
liste<select name="liste" class="OBLI">
	<option value=""></option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select><br />
<input type="checkbox" name="testCB[]" class="OBLI" />
<input type="checkbox" name="testCB[]" class="OBLI" />
<input type="checkbox" name="testCB[]" class="OBLI" />
<br />
<input type="radio" name="testRD[]" class="OBLI" />
<input type="radio" name="testRD[]" class="OBLI" />
<input type="radio" name="testRD[]" class="OBLI" />
<br />
<input type="checkbox" name="testCB2" class="OBLI" />
<input type="radio" name="testRD2" class="OBLI" />
 
leTexte<textarea name="leTexte" class="OBLI"></textarea><br />
<input type="button" value="ok" onclick="test();" />
</form>

test1
test2
test3
liste


leTexte

Explication

Pour appeler cette fonction il suffit de faire comme ceci: verifChamp('idFormulaire','OBLI') idFormulaire est l'id que vous avez donné au formulaire que vous voulez tester. 'OBLI' est le nom de la classe que vous avez donné au champ que vous voulez vérifier.

Pour récuperer les valeur et les nom des champs (par exemple, dans le but de générer une chaine pour envoyer un formulaire) on peut utliser la forme :

javascript
var nom = ret['valide'][0].name; //renvoi l'attribut name du champs du formualire
var valeur = ret['valide'][0].value; //renvoi l'attribut value du champs du formualire



12/03/2007 09:32 -

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.