[JavaScript] Fonction JS de validation de formulaire

Eléphant du PHP | 441 Messages

24 Août 2006, 13:36

Bonjour à tous,

je voulais juste vous proposer un validateur javascript que j'utilise depuis quelques années déjà et qui est pour moi l'un des meilleurs.
Je l'avais trouvé www.dieterraber.net et de plus amples explication sont données ici: ici
A l'époque il n'y avait pas toutes les explications donc je vous laisse les lire. Pour ma part j'ai rajouté 2 contrôle supplémentaires : format de date et caractères spéciaux.

Les optoons de contrôles:

e empty l'élément ne doit pas être vide
n number l'élément doit être un nombre
m mail une adresse électronique doit être exacte sur la forme
r regexp la valeur doit correspondre à un modèle déterminé
p price la valeur doit se présenter sous la forme "10,00" (avec virgule)
p. price_dot la valeur doit se présenter sous la forme "10.00" (avec point)
c capitalize Les noms propres doivent être corrigés
d date validité des dates au format JJ/MM/AAAA
s special contrôle l'absence de caractères spéciaux (seuls les lettres sans accent, chiffres, tiret et underscore sont autorisés) fonction perso ;)

De plus j'ai en général une div d'erreur que je remplis avec les rapports d'erreurs émis par la fonction validate et qui marque aussi les champs incriminés (style CSS).

Exemple d'un formulaire. En fait on va executer une fonction de contrôle spécifique sur l'évènement onSubmit du formulaire
Partie HTML
[php]
<div id="erreur" class="confirmation cache"></div>
<form name="nomduforme" action="" method="post" onSubmit="retunr ctrl_dicochamp_form('nomduforme')">
<input name="code" id="code" type="text" value=""/>
<input name="libelle" id="libelle" type="text" value=""/>
<input name="code" id="code" type="text" value=""/>
<select name="format" id="format">
<option value="0">choisissez votre format</option>
<option value="1">texte</option>
<option value="2">règle</option>
</select>
<input name="naissance" name="naissance" type="text" value=""/>
[/php]
Partie CSS:
[php]
.erreur {
background-color: #ffcccc;
font-weight:bold;
color:red;
text-align: center;
margin: 5px;
}
.visible{
visibility:visible;
display:block;
}
.cache{
display: none;
}
.champObligatoire {
border: 1px solid #f00;
background-color: #ffcccc;
color: #f00;
}
[/php]

Partie Javascript
[php]

/*exemple 1 */

function ctrl_dicochamp_form(form)
{
//création du tableau récpitulant les contrôles à effectuer sur les formulaires (name des éléments à chaque fois)
var msg_1 = 'Erreurs :';
var var_1 = new Array();
//var_1[0] = new Array([name de l'élément],[options de contrôles],[texte de l'erreur],[regex]);
var_1[0] = new Array('code','e','Code obligatoire','');
var_1[1] = new Array('code','s','Le code ne doit pas comporter de caractères spéciaux','');
var_1[2] = new Array('libelle','e','Libellé obligatoire','');
var_1[3] = new Array('format','r','Sélection du format obligatoire',/[^0]/);
var_1[4] = new Array('naissance','d','Format de la date de naissance invalide JJ/MM/AAAA',/[^0]/);

return validate(form,var_1,msg_1);
}


/*le validateur*/
function validate(sender,myarray,err_hd) {

var message_erreur = new Array();
var error = false;
var tabErreur=new Array();

// remise à zéro du champ erreur
document.getElementById('erreur').innerHTML="";
document.getElementById('erreur').className="erreur cache";

/*remise à zéro des class CSS des champs du formulaire*/
var elements = document.forms[sender].elements;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if ((element.type!='submit')&&(element.type!='reset')&&(element.type!='button'))
{
element.className = '';
}

}

/*boucle de parcours du tableau d'entrée*/
for (i=0;i<myarray.length;i++) {
var errorField = false;
//field = document.forms[sender.name].elements[myarray[i][0]];
field = document.forms[sender].elements[myarray[i][0]];
// remise à zéro de la classe du champ
//alert ('champ='+myarray[i][0]+' valeur='+field.value+' field='+field);


/* Bloc 1 vérifie les champs qui doivent être renseignés */
if (myarray[i][1].indexOf('e')>-1) {
if (!field.value) {
error = true;
errorField = true;
message_erreur.push(myarray[i][2]);
}
}

/* Bloc 2 vérifie si l'adresse électronique est correcte dans la forme */
else if (myarray[i][1].indexOf('m')>-1) {
if (field.value) {
var usr = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\"]|\\\\[^\x80-\xff])+\")";
var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
var regex = "^"+usr+"\@"+domain+"document.getElementById";
var myrxp = new RegExp(regex);
var check = (myrxp.test(field.value));
if (check!=true) {
error=true;
errorField = true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
}
}

/* Bloc 3 vérifie les champs dont la valeur doit être numérique */
else if (myarray[i][1].indexOf('n')>-1) {
var num_error = false;
if(field.value) {
var myvalue = field.value;
var num = myvalue.match(/[^0-9,\.]/gi)
var dot = myvalue.match(/\./g);
var com = myvalue.match(/,/g);
if (num!=null) {
num_error = true;
}
else if ((dot!=null)&&(dot.length>1)) {
num_error = true;
}
else if ((com!=null)&&(com.length>1)) {
num_error = true;
}
else if ((com!=null)&&(dot!=null)) {
num_error = true;
}
}
if (num_error==true) {
error = true;
errorField = true;
message_erreur.push(myvalue+" "+myarray[i][2]);
}
}

/* Bloc 4 vérifie la valeur à l'aide d'une expression régulière sur un modèle déterminé */
else if (myarray[i][1].indexOf('r')>-1) {
var regexp = myarray[i][3];
if (field.value) {
if (!regexp.test(field.value)) {
error = true;
errorField = true;
// message_erreur.push(field.value+" "+myarray[i][2]);
message_erreur.push(myarray[i][2]);

}
}
}

/* Bloc 5 vérifie les champs qui doivent être formatés comme des prix et modifie éventuellement le formatage */
else if (myarray[i][1].indexOf('p')>-1) {
var myvalue = field.value;
var reg = /,-{1,}|\.-{1,}/;
var nantest_value = myvalue.replace(reg,"");
var num = nantest_value.match(/[^0-9,\.]/gi)
sep = myarray[i][1].substr(1,1)?myarray[i][1].substr(1,1):',';
if (field.value) {
var myvalue = field.value.replace(/\./,',');
if (myvalue.indexOf(',')==-1) {
field.value = myvalue+sep+'00';
}
else if (myvalue.indexOf(",--")>-1) {
field.value = myvalue.replace(/,--/,sep+'00');
}
else if (myvalue.indexOf(",-")>-1) {
field.value = myvalue.replace(/,-/,sep+'00');
}
else if (!myvalue.substring(myvalue.indexOf(',') + 2)) {
error=true;
errorField = true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
else if (myvalue.substring(myvalue.indexOf(',') + 3)!='') {
error=true;
errorField = true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
else if (num!=null) {
error=true;
errorField = true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
}
}

/* Bloc 6 vérifie les champs de nom et rectifie éventuellement la casse */
else if (myarray[i][1].indexOf('c')>-1) {
var noble = new Array(" d\'", "de","von","van","der","d","la","da","of");
var newvalue='';
var myvalue = field.value.split(/\b/);
for (k=0;k<myvalue.length;k++) {
newvalue+= myvalue[k].substr(0,1).toUpperCase()+myvalue[k].substring(1);
}
for(k=0;k<noble.length;k++){
var reg = new RegExp ("\\b"+noble[k]+"\\b","gi");
newvalue = newvalue.replace(reg,noble[k]);
}
field.value = newvalue;
}
/*Bloc 7 controle validité des dates format : JJ/MM/AAAA*/
else if (myarray[i][1].indexOf('d')>-1) {
var ctl = /^(\d\d?)[\/](\d\d?)[\/](\d{4,})document.getElementById/;
var ctl_date = false;
var tab = (field.value).match(ctl);
if (tab) {
var unedate = new Date(tab[3], parseInt(tab[2],10)-1, tab[1]);
if ((unedate.getFullYear() == tab[3]) && (unedate.getMonth() == tab[2]-1) && (unedate.getDate() == tab[1]))
ctl_date = true;
}
if (! ctl_date) {
error = true;
errorField = true;
message_erreur.push(myarray[i][2]);
}
}
/*Bloc 8 controle l'absence de caractères spéciaux*/
else if (myarray[i][1].indexOf('s')>-1) {
var ctl = /^[0-9a-zA-Z_-]*document.getElementById/;
var ctl_code = false;
var tab = (field.value).match(ctl);
if (tab)
ctl_code = true;

if (! ctl_code) {
error = true;
errorField = true;
message_erreur.push(myarray[i][2]);
}
}
/*Affichage des erreurs s'il en existe*/
if (errorField)
{
//à l'origine le script affichaient les erreurs en alert
//alert (myarray[i][0]);
tabErreur.push(myarray[i][0]);
}
}


/* En cas d'erreur, les messages d'erreur récoltés sont exploités ici puis affichés.
Si le formulaire est correctement rempli, il est transmis */
if (error) {
//préparation du message
message_erreur = message_erreur.join('\n<br />');
//remplissage de la div d'erreur
document.getElementById('erreur').innerHTML=message_erreur;
//changement du style CSS pour son affichage
document.getElementById('erreur').className="erreur visible";

//on parcours les élements en erreur et on les marques par un style CSS particulier
var x;
for (x=0;x<tabErreur.length;x++)
{
document.forms[sender].elements[tabErreur[x]].className="champObligatoire";
}

return false;
}
else {
return true;
}
}
[/php]


Bonus track:
fonction JS qui contrôle la validité de deux dates fournies en paramètres et vérie si la seconde date est bien supérieure à la première.
[php]
/*fonction de contrôle validité couple de date (fonctionne aussi si on ne renseigne que l'une des deux dates) */
function controleFormatDate(date_debut_valeur, date_fin_valeur) {
// contrôle la valeur d'un champ comme une date au format JJ/MM/AAAA
var ok2 = false;
var ok1 = false;
ctl = /^(\d\d?)[\/](\d\d?)[\/](\d{4,})document.getElementById/;

if(date_fin_valeur== "" )
ok2=true;
else {
var tab = date_fin_valeur.match(ctl);
if (tab) {
var unedate = new Date(tab[3], parseInt(tab[2])-1, tab[1]);
if ((unedate.getFullYear() == tab[3]) && (unedate.getMonth() == tab[2]-1) && (unedate.getDate() == tab[1])) ok2 = true;
}
}
// vérifie le format date
if(date_debut_valeur == "" )
ok1=true;
else {
var tab = date_debut_valeur.match(ctl);
if (tab) {
var unedate = new Date(tab[3], parseInt(tab[2])-1, tab[1]);
if ((unedate.getFullYear() == tab[3]) && (unedate.getMonth() == tab[2]-1) && (unedate.getDate() == tab[1])) ok1 = true;
}
}


if ( ok1 && ok2) {
var ok=true;
}
else {
alert('Filtrage: Format de date invalide (JJ/MM/AAAA) ou date incohérente');
var ok=false;
}

return ok;
}[/php]
Futures Stars par ici >> www.apel-doorn.com
fan d'info et du ... PSG !! :D
Apprendre, comprendre et maîtriser telle est ma devise!
Fan inconditionnel de netvibes

Modérateur PHPfrance
Modérateur PHPfrance | 7637 Messages

24 Août 2006, 14:09

C'est un post déstiné à faire partager ton savoir ?
Si oui il a plus sa place dans le Forum "Vos contributions"

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 441 Messages

24 Août 2006, 14:32

bah c'est du JS... pas trop du PHP alors j'ai hésité :?
Futures Stars par ici >> www.apel-doorn.com

fan d'info et du ... PSG !! :D

Apprendre, comprendre et maîtriser telle est ma devise!

Fan inconditionnel de netvibes

Modérateur PHPfrance
Modérateur PHPfrance | 7637 Messages

24 Août 2006, 15:01

C'est un Forum général... tout script (PHP ou Javascript) y est bienvenue :)

Je déplace.

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Avatar de l’utilisateur
Administrateur PHPfrance
Administrateur PHPfrance | 11330 Messages

12 Août 2009, 18:16

Modération :
Les liens présentés ne sont plus valides et entraînent une erreur 404.
Merci de corriger ces liens afin de permettre à tous de profiter de cette contribution.