Tester un formulaire en JavaScript

Voici la refonte du code que j’avais déjà réalisé, mais qui je l’avoue n’était pas optimum.
Cette fonction a été testée sous Mozilla Firefox et Microsoft Internet Explorer.

Celui-ci offre la possibilité de tester tous les types de champs de formulaire qui pour vous sont obligatoire.

Pour différencier les champs obligatoires des non-obligatoires, le nom du champs obligatoire devra porter la mention « test- » c’est à cette partie du nom que la fonction va les différencier.
Exemple de champs obligatoire :

< input name="test-nom-du_champ" type="text">

Afin de valider les emails utilisés la mention « test-email- »
Exemple de champs obligatoire avec test d’email :

< input name="test-email-nom-du_champ" type="text">

La fonction teste maintenant les champs de type radio, checkbox et select (simple et multiple)

Pour les champs de type radio, si vous en avez plusieurs lots de suite qui ne font pas partie de la même question, la fonction va les distinguer et les traiter séparément.

Pour les champs de type select la fonction va tester si au moins une des options est choisie.
Mais si vous disposez d’une (ou plusieurs) option(s) par défaut qui a pour valeur null ou -1 la fonction la considère comme non sélectionnée(s).
Exemple

< option value="-1" >-----------------< /option>

La première option même sélectionnée ne sera pas prise en compte.

Attention ce test ne vous dispense pas d’un test « serveur » des données envoyées.
Cette fonction ne permet que de prévenir l’utilisateur des champs oubliés, il ne teste pas la validité des réponses.

voici le code

function checkForm(els){
	var els = els.elements; // éléments du formulaire
	var regEx =/^test-(.+)/; // expression régulière testant si le champs est à valider
	for ( var i = 0 ; i < els.length ; i++ ) { // on boucle sur les éléments du formulaire
		if(regEx.test(trim(els[i].name.toString()))){ // test si le champs est à valider
		switch(els[i].type){ //Chaque élément à son test personnalisé

			//test des champs de type text
			case "text":
				if(trim(els[i].value).length <= 0){
					alert("vous devez remplir le champs de text");
					els[i].focus();
					return false;
				}else{ // test si c'est un champs contenant un email
					regExEmail = /^test-email-(.+)/;
					if(regExEmail.test(trim(els[i].name.toString()))){
						if(!isEmail(els[i].value)){
							alert("l'email saisie est invalide");
							 els[i].focus();
							return false;
						 }
					 }
				}
				 break;

				//test des champs de type textarea
				case "textarea":
					if(trim(els[i].value).length <= 0){
					alert("vous devez remplir le champs de text");
					els[i].focus();
					return false;
				 }
				  break;

				//test des champs de type file
				case "file":
					if(trim(els[i].value).length <= 0){
						alert("vous devez envoyer un fichier");
						els[i].focus();
						return false;
					}else{
						//test si l'extention est valide
						if( /^(.+).(pdf|jpg|gif|avi)/i.test(trim(els[i].value.toLowerCase())) == false){
							alert("vous n'avez pas choisi le bon type de fichier");
							els[i].focus();
							return false;
 						}
					 }
					 break;

					//test des champs de type radio
					case "radio": // test pour les champs radio
						var test = false;
						var nom_champ = els[i].name; // si des champs radio se suivent et ne portent pas le même nom on les traite séparément
						// on boucle sur les champs radio pour savoir si au moins un champs est sélectionné
						while(els[i].type == "radio" && nom_champ == els[i].name){
							if(els[i].checked){
								test = true;
							}
							i++;
						}
						i--;
						if(!test){
							alert("vous devez sélectionner une option radio");
							els[i].focus();
							return false;
						}
						 break;

						//test des champs de type checkbox
						case "checkbox":
							if(!els[i].checked){
								alert("vous devez sélectionner une option chekbox");
								els[i].focus();
								return false;
							}
						 break;

 						//test des champs de type select où une seule sélection est possible
						case "select-one":
						var test = false;
						for(var x=0; x < els[i].length; x++){
							if(els[i][x].selected && els[i][x].value != '-1'&& trim(els[i][x].value) != ''){
								test = true;
							}
						}
						if(!test){
							alert("vous devez sélectionner une option dans la liste déroulante");
							els[i].focus();
							return false;
						}
						 break;

						//test des champs de type select où plusieurs sélections sont possibles
						case "select-multiple":
							var test = false;
							for(var x=0; x < els[i].length; x++){
								if(els[i][x].selected && els[i][x].value != '-1'&& trim(els[i][x].value) != ''){
									test = true;
								}
							}
							if(!test){
								alert("vous devez sélectionner une option dans la liste multiple");
								els[i].focus();
								return false;
							}
							 break;
						 } // fin du switch
					 } // fin du for
				 } // fin du if

		 if(test){
			 return false;
		 }
 	}

function isEmail(strSaisie) {
	var verif = /^[^@]+@(([w-]+.){1,4}[a-zA-Z]{2,4}|(([01]?d?d|2[0-4]d|25[0-5]).){3}([01]?d?d|2[0-4]d|25[0-5]))$/
	return ( verif.test(strSaisie) );
}

//fonction trouvée à l'adresse suivante
//http://anothergeekwebsite.com/fr/2007/03/trim-en-javascript
function trim(aString) {
	var regExpBeginning = /^s+/;
	var regExpEnd       = /s+$/;
	return aString.replace(regExpBeginning, "").replace(regExpEnd, "");
}
Tagués avec : , ,
Publié dans JavaScript - AJAX
2 commentaires pour “Tester un formulaire en JavaScript
  1. Mathieu dit :

    Merci pour votre code (très utile pour moi qui suis débutant)
    Par contre j’aurais une petite question de novice certainement, mais comment faire pour que quand un visiteur clique sur envoyer, le formulaire soit vérifier et que si tout est bon, le formulaire envoie les données à la page de traitement.
    Merci d’avance et félicitation pour votre joli blog.
    Mathieu

    • waldo2188 dit :

      Pour faire simple tu appelles cette fonction sur l’évènement « submit » du formulaire.
      Du fait que la fonction retourne « false » si elle trouve un problème l’action submit est stoppée donc le formulaire n’est pas envoyé.
      Si la fonction ne renvoie pas « false » l’action du submit continue et envoie le formulaire.
      En espérant que cela t’aide.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*