IDEE

La fonction ci-dessous permet de valider un formulaire.
C'est à dire quelle va vérifié que tous les champs obligatoire soit bien rempli
Par bien, j'entends non seulement avec des données mais aussi avec un format correct (date, numérique, montant monétaire….)

UTILISATION

D'abord, configurer le formulaire. Pour chaque champs obligatoire rajouter dans la balise “input” du champs le paramètre “title” qui va contenir :

  • le nom du champs
  • Le format (entre parenthèses)

Les formats dispos sont : INT (numérique), MNT (montant, c'est a dire numérique avec espace), CAR (alphanumérique), DAT (Date, au format JJ/MM/AAAA), EML (Email, avec un @ obligatoire)

On peu aussi ne pas mettre de format. Le simple fait de mettre un title va rendre le champs obligatoire. Si aucun format n'est précisé, il sera juste vérifié que le champs n'est pas vide.
  Exemple :
  <input type="text" name="plop" title="nom (CAR)" />
  Ceci va rentre le champs plop obligatoire.

Ensuite brancher sur le bouton Valider la fonction, qui va annuler l'envoie du formulaire si elle échoue.

  Exemple :
  <input name="Save" type="submit" id="Save" onClick="return validateForm();" value="Enregistrer" >
  Dans ce cas, toutes les balise "input" de la page, quelques soit le formulaire qui les contient seront vérifiés.
  Mais on peu aussi passé en paramètre de la fonction un argument facultatif contenant le nom du formulaire a vérifier.
  <input name="Save" type="submit" id="Save" onClick="return validateForm('form1');" value="Enregistrer" >

CODE

javascript
function validateForm() { //argument facultatif : nom du formulaire
	if (arguments.length>=1) {
		var x = document.forms[arguments[0]].elements;
 
	} else {
		var x = document.getElementsByTagName("input");
	}
	var msg='';
	var tmp='';
	var msgF='';
	var format=true;
	for (i = 0; i < x.length; i++) {	
		if ((x[i].title != '') && (x[i].title != null) && (x[i].style.display != 'none')) {
			if ((x[i].title.lastIndexOf(')') == x[i].title.length-1) || (x[i].title.lastIndexOf('(') == 0)) {
				tmp=x[i].title.substring(x[i].title.lastIndexOf('(')+1,x[i].title.lastIndexOf(')'));
				var vnospace=replace(x[i].value,' ','');
				if (((tmp=='INT') || (tmp=='MNT')) && (isNaN(vnospace))) {
					format=false;
					msgF=' Il doit être au format numérique.';
				}
				if ((tmp=='CAR') && (!isNaN(x[i].value))) {
					format=false;
					msgF=' Il doit être au format alpha-numérique.';
				}
				if (tmp=='DAT') {
					if (!isNaN(x[i].value)) {
						format=false;
						msgF=' Il doit être au format JJ/MM/AAAA.';
					} else if (x[i].value.length!=10) {
						format=false;
						msgF=' Il doit être au format JJ/MM/AAAA.';
					} else {
						if (
							   (isNaN(x[i].value.charAt(0)+x[i].value.charAt(1)))
							|| (x[i].value.charAt(2) != '/')
							|| (isNaN(x[i].value.charAt(3)+x[i].value.charAt(4)))
							|| (x[i].value.charAt(5) != '/')
							|| (isNaN(x[i].value.charAt(6)+x[i].value.charAt(7)+x[i].value.charAt(8)+x[i].value.charAt(9)))
							) {
								format=false;
								msgF=' Il doit être au format JJ/MM/AAAA.';
							}
					}
				}
				if ((tmp == 'EML') && ((x[i].value.indexOf('@')<1) || (x[i].value.indexOf('@')==(x[i].value.length-1)))) {
					msgF=' Il doit être au format email (@ obligatoire).';
					format=false;
				}
			} 
			if ((x[i].title.lastIndexOf('(') == 0) && (format==false) && ((x[i].value != null) && (x[i].value != ''))) {
				msg+='Le champs "'+x[i].title.substring(x[i].title.lastIndexOf(')')+1)+'" est obligatoire.'+msgF.substring(3)+'\n';
			} 
			if (((x[i].value == null) || (x[i].value == '') || (format == false)) && (x[i].title.lastIndexOf('(') != 0)) {
				var z=x[i].title.length;
				if (x[i].title.lastIndexOf('(') != -1) {
					var z=x[i].title.lastIndexOf('(');
				}
				msg+='Le champs "'+x[i].title.substring(0,z)+'" est obligatoire.'+msgF+'\n';
			}
		}
		format=true;
		msgF='';
	}
	if (msg) alert('Les erreurs suivantes sont apparues :\n'+msg);
	return (msg == '');
}

Complément

Pour faire fonctionner la procédure ci dessus, vous aller avoir aussi besoin de cette fonction :

En javascript la fonction Replace n'existe pas, voici donc une fonction qui le fait :

javascript
function replace(string,text,by) {
// Replaces text with by in string
    var strLength = string.length, txtLength = text.length;
    if ((strLength == 0) || (txtLength == 0)) return string;
    var i = string.indexOf(text);
    if ((!i) && (text != string.substring(0,txtLength))) return string;
    if (i == -1) return string;
    var newstr = string.substring(0,i) + by;
    if (i+txtLength < strLength)
        newstr += replace(string.substring(i+txtLength,strLength),text,by);
    return newstr;
}
replace · 01/01/1970 01:00

Rendre le bouton d'envoi inactif

Il peut, dans certain cas, être intéressant de rendre le bouton d'envoi inactif pour éviter les “doubles post”.
Voici comment procéder:
Ajouter la fonction suivante dans votre javascript:

javascript
function sendForm() {
document.getElementById('monBouton').disabled=true;
if (validateForm()) {
document.forms.NOMDEMONFORMULAIRE.submit();
}
}

Il vous faudra nommer votre formulaire et modifier le bouton d'envoi comme ceci:

html4strict
<input type="button" id="monBouton" onclick="sendForm();" value="Envoyer">

Vous remarquerez que ce n'est plus la fonction validateForm qui est directement appeler mais la fonction sendForm !