Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance

Vers le contenu

» Masquer les résultats de la recherche

Recherche dynamique PHPfrance

  1. Effectuez une recherche, les résultats s'afficheront dynamiquement ici.

[JavaScript] Fonction JS de validation de formulaire

Postez ici toutes vos petites astuces de développement, les scripts sympa et vos productions personnelles.
Ainsi vos messages ne seront pas enfouis sous une tonne de questions.

[JavaScript] Fonction JS de validation de formulaire

Messagepar starkeus 24 Aoû 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
Syntaxe: [ Télécharger ] [ Masquer ]
Code 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=""/>

       

Partie CSS:
Syntaxe: [ Télécharger ] [ Masquer ]
Code 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;

        }

       


Partie Javascript
Syntaxe: [ Télécharger ] [ Masquer ]
Code 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;

          }

        }

       



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.
Syntaxe: [ Télécharger ] [ Masquer ]
Code 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;

        }
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
starkeus
Eléphanteau
 
Messages: 441
Inscription: 19 Fév 2005, 09:29
Localisation: Versailles

Messagepar Truc 24 Aoû 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
Avatar de l’utilisateur
Truc
Modérateur PHPfrance
Modérateur PHPfrance
 
Messages: 7637
Inscription: 01 Sep 2005, 18:56
Localisation: Lille

Messagepar starkeus 24 Aoû 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
starkeus
Eléphanteau
 
Messages: 441
Inscription: 19 Fév 2005, 09:29
Localisation: Versailles

Messagepar Truc 24 Aoû 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
Truc
Modérateur PHPfrance
Modérateur PHPfrance
 
Messages: 7637
Inscription: 01 Sep 2005, 18:56
Localisation: Lille

Re: [JavaScript] Fonction JS de validation de formulaire

Messagepar albat 12 Aoû 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.
Avatar de l’utilisateur
albat
Administrateur PHPfrance
Administrateur PHPfrance
 
Messages: 11330
Inscription: 07 Fév 2005, 18:17
Localisation: "Si sur ta piste tu enlèves un caillou, tu l’enlèves aussi pour ceux qui suivent."


Retourner vers Vos contributions

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité