Programmation web CSS HTML PHP Javascript RSS SQL SSH, serveur linux Outils
  PHPascal a 71 articles

Modifier la couleur:

• Bleu
• Orange
• Mauve
• Noir
• Rouge
• Vert

Programmation web / Javascript / code validation formulaire js

Code javascript pour valider un formulaire

Voici le code source javascript d'une validation de formulaire dans un fichier externe (.js). Pour plus d'explication sur l'utilisation voir l'article : Validation d'un formulaire.

Pour utiliser cette validation il suffit d'ajouter ce javascript externe avec la ligne :

• <script  type="text/javascript" src="validation.js"   charset="iso-8859-1" ></script>

et ajouter l'option 'onSubmit="return validForm(this)"' a la balise <form> de votre formulaire. Exemple :

• <form action=page.php method=post name=formulaire onSubmit="return valider_formulaire(this)">

(l'ajout du charset pour l'appel du script est facultatif si la page et le script on le même encodage, par contre ceci est util pour faire marcher un script qui a un autre encodage que sur la page)

j'ai mis dans ce script un try et catch pour afficher des erreur qui pourrais survenir pour aidé le débogage.

Code source du fichier validation.js :

function valider_formulaire(passForm)
{
 try
   {
    var nb_erreur =0;
   
    var fra = "";
   
    var   fra_debut = "_____________________________________________________________\n\n";
                fra_debut += "Le formulaire n\'a pas été envoyé. Vous devez remplir tous les champs\n";
                fra_debut += "obligatoires, veuillez corriger et envoyer de nouveau le formulaire. Merci!\n";
                fra_debut += "_____________________________________________________________\n\n";
               
   
    if (passForm.compagnie_1.value == "")
    {
        nb_erreur++;
        fra += "          Compagnie #1 \n";
        passForm.compagnie_1.className = 'texte1 erreur';
    }
    else { passForm.compagnie_1.className = 'texte1';   }
   
   
    if (passForm.telephone.value == "")
    {
        nb_erreur++;
        fra += "          Téléphone  \n";
        passForm.telephone.className = 'texte1 erreur';
    }
    else { passForm.telephone.className = 'texte1';}
   
   
    if (passForm.courriel.value != "")
    {     
        /* test si un format valide de courriel */
        if ((passForm.courriel.value.lastIndexOf(".") < passForm.courriel.value.indexOf("@")+3
                    || passForm.courriel.value.lastIndexOf(".") > passForm.courriel.value.length-3
                    || passForm.courriel.value.indexOf("@") < 1 ) || passForm.courriel.value.length < 3 
                    || passForm.courriel.value.indexOf("@") != passForm.courriel.value.lastIndexOf("@")   )
        {  /* format invalide de courriel */
            nb_erreur++;
            fra += "          Courriel (assurez-vous d'entrer un format valide moi@hotmail.com) \n";
            passForm.courriel.className = 'texte1 erreur';
        }
        else
        { /* format valide */
            passForm.courriel.className = 'texte1';
        }
    }
         
   
    fra_une = "- Vous devez entrer le champ suivant :\n";
    fra_plusieur = "- Vous devez entrer les champs suivants :\n";
   
    var tout = ""; /* tout le message afficher */
   
    tout += fra_debut; 
   
    if (nb_erreur > 1) {tout += fra_plusieur; }
    else{ tout += fra_une; }
   
    tout += fra;
   
    if (nb_erreur == 0)
    {
        return true;
    }
    else
    {
        alert(tout);   
        return false;
    }
}
     catch(e)
     {
             alert('erreur dans la fonction valider_formulaire \n\n' + e.message);
        }

}

Article écrit le 4 avril 2009
Article modifié le 6 février 2010

Autres articles sous la même catégorie

• Formatage d'un nombre en javascript avec une fonction (12345 -> $12 345.00) - comme la fonction number_format de PHP
• Ajouter l'exécution d'une fonction javascript après le chargement de la page
• Validation d'un formulaire de façon ergonomique en javascript