Tester un formulaire en javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 45 201 fois - Téléchargée 23 fois

Contenu du snippet

voici la refonte du code que j'avais déjà réalisé il y a quelque temps, mais qui je l'avoue n'était pas optimum.
Cette fonction à été testé sous Mozilla Firefox et Microsoft Internet Explorer.

Celui-ci offre la possibilité de tester tout 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 type="text" name="test-nom-du_champ"

Affin de valider les emails utiliser la mention « test-email- »
Exemple de champs obligatoire avec test d'email : input type="text" name="test-email-nom-du_champ"

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 lot 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 choisi.
Mais si vous disposez d'une (ou plusieurs) option par défaut qui a pour valeur null ou -1 la fonction la considère comme non sélectionné.
Exemple
option value="-1" ----------------- /option
La première option même sélectionné ne sera pas prise en compte.

pour le tester en live c'est par ici : http://labo.mon-beulogue.com/teste_formulaire_javascript/

Source / Exemple :


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 porte pas le même nom on les traites 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 seul 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 possible
                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 multipe");
                        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é à 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, "");
}

A voir également

Ajouter un commentaire

Commentaires

apoca62
Messages postés
2
Date d'inscription
mardi 20 avril 2010
Statut
Membre
Dernière intervention
16 juin 2010
-
Bon script car facil à comprendre ;)
cependant, pour ceux qui veulent utiliser les radio button, et les autres types où la varible "test" est utilisé à l'intérieu des cases, il est necessaire de supprimer le "if(test){ return false; }" ligne 116. en effet si on sort "normalement" d'un case la variable "test" vaut true.Et dont on rentre dans le if ligne 116...qui lui retourne false. alors que si la variable "test" reste à false on rentre directement dans les if situé dans les cases...et donc ça retourne false aussi.
Voila
Et attention, Tous les éléments du formulaire doivent avoir un name ;) (même les fieldset)
gussoner
Messages postés
14
Date d'inscription
jeudi 21 avril 2005
Statut
Membre
Dernière intervention
5 décembre 2014
-
Salut,

merci pour ce script, cependant j'ai un soucis avec les checkbox.

Mon code
2aaa

2bb

2cc

Tant que toutes ne sont pas cochées il me met un message d'erreur..
ouebe
Messages postés
6
Date d'inscription
jeudi 15 novembre 2007
Statut
Membre
Dernière intervention
15 février 2013
-
Merci et bravo, le formulaire est vraiment complet.

Mais j'aimerai ajouter, pour éviter le spam et des robots, un champ où le visiteur doit inscrire un mot définit. S'il n'est pas inscrit juste que le formulaire ne soit pas envoyé. Comme avec la boîte de message de ton formulaire. J'ai bien entendu parler du captcha mais ça ne me convient pas.
Ce que je désire c'est le style "inscrivez quelle est la capitale de la France" et si le visiteur n'écrit pas "Paris" mais "Toulouse", ou n'importe quoi, le formulaire ne soit pas envoyé mais un message qui lui indique qu'il doit écrire Paris ou alors redirigé vers une page avec l'indication du bon mot demandé à inscrire dans le champ.
Comme quand on remplit un mail sans l'@ ou sans .com que le visiteur à un message l'email est invalide. Sauf que là je désire, en plus, un mot bien définit est rien d'autre inscrit à la place.
webmcmaster
Messages postés
15
Date d'inscription
samedi 25 février 2006
Statut
Membre
Dernière intervention
28 décembre 2008
-
Désolé, c'est encore me... pour 2 raisons :
1 - Maintenant, les champs radio et select sont bien contrôlés, mais si l'on utilise ces derniers, même individuellement, le formulaire ne peut pas être envoyé après contrôle... mais nul doute que Waldo va trouver la solution :) !
2 - Si l'on souhaite valider le formulaire à l'aide d'une action javascript : par exemple : "javascript:document.formulaire.submit()", comment peut-on intégrer la fonction "return checkForm(this)" afin d'envoyer le formulaire à partir de n'importe quel lien ?
Merci d'avance
webmcmaster
Messages postés
15
Date d'inscription
samedi 25 février 2006
Statut
Membre
Dernière intervention
28 décembre 2008
-
Merci bien WALDO...
Helas, j'avais bien la dernière version...
Après tests, cela fonctionne correctement seulement si, les champs : text, textarea, checkbox, file et la fonction mail sont utilisés... par contre, ça merdouille si on utilise les champs : radio et select...
Oh, grand maître :) Aurais-tu la bonté de vérifier ton magnifique script afin qu'il remplisse entièrement sa tâche ?

NB : Même si quelques grammes de code indispose le script (sauf grosse bourde de ma part)... je note 10/10 car j'ai bien cherché sur le net et je n'ai pas trouvé de script aussi simple qui s'occupe aussi bien de tous les champs !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.