script vérification formulaire, cherche aide pour aprofondir mon script !Résolu

Question

bonjour,

Voilà j'ai pioché sur le net afin de trouver de l'aide pour un script de vérification pour mes formulaires, j'en ai trouvé un pas mal (voir ci dessous) mais en fait il rend tout les champs obligatoires, hors je ne souhaite pas que tout mes champs soient obligatoires ://
Et je voudrai pouvoir vérifier l'adresse mail (valide ou non) et également le n° de tel.  
Quelqu'un pourrait t'il m'aider? Je suis novice en javascript :s:s
Par contre ce script me plait car il affiche un message d'erreur pour tout les champs et met une couleur de fond différente pour chaque champ non rempli... :-)

Merci d'avance pour votre aide.

function check_input(){

   var message_alert = "";
   for(var i = 0; i < window.document.forms[0].length ; i++) {
  

      var champ = window.document.forms[0].elements[i].value;
      var nom_champ = window.document.forms[0].elements[i].name;
      
      
// Background des éléments déjà formatés      
window.document.forms[0].elements[i].style.backgroundColor = "#a4b6a4";    
// 
    
if(champ == "") {
window.document.forms[0].elements[i].focus();
window.document.forms[0].elements[i].style.backgroundColor = "#b64046";
message_alert +=" Veuillez remplir votre " + nom_champ +"
";
}
}
   if (message_alert == "") {
  
    
         return true;
        
        
      } else {
     
         message_alert = "Informations omises dans le formulaire : 
" + 
message_alert;
        
         alert(message_alert);
        
         return false;
            
}
}

cs_ov3rdoze · Accepted Answer

Si tu as une page index dans laquelle tu inclus les autres pages il doit y avoir moyen de simplifier les choses...

Dans ta page index met la fonction :

function check_input(formulaire){
        var msg= "";
        if (formulaire.nom.value=="") {
                msg += " - Vous avez oublié le nom
";
                formulaire.nom.style.backgroundColor = "#b64046";
        }
        if (formulaire.prenom.value=="")
                msg += " - Vous avez oublié le prénom
";
                formulaire.nom.style.backgroundColor = "#b64046";
        }
...
        return msg;                   //On retourne une chaine de caractères
}

Elle retourne une  chaine de caractère  et et non plus un alert() comme au début.
Ensuite il te faut une fonction pour chaque formulaire, qui soumettra le formulaire ou affichera l'erreur.

Pour le formulaire1 :
function test_form1(formulaire) {
        var msg  = "Attention

";
         msg += check_input(formulaire);                          //On ajoute au message les erreurs trouvées par check_input()
         if (formulaire.choix1.value=="0") {                       //On teste les champs supplémentaires
                msg += " - erreur 
";
                formulaire.choix1.style.backgroundColor = "#b64046";
        }
...
        if (msg!="Attention

")
                alert(msg);
        else
                formulaire.submit();
}

Pour le formulaire2 :
function test_form2(formulaire) {
        var msg = "Attention

";
         msg += check_input(formulaire);                          //On ajoute au message les erreurs trouvées par check_input()
         if (formulaire.reno.value=="") {
                msg += " - erreur 
";
                formulaire.reno.style.backgroundColor = "#b64046";
        }
...
        if (msg!="Attention

")
                alert(msg);
        else
                formulaire.submit();
}

etc.

Tu peux mettre ces fonctions dans ton index, ou bien mettre test_form1() dans la page ou ya le formulaire1... (Mais si tu inclus les pages dans ton index met les fonctions dans l'index ça sera plus simple et ça posera moins de problèmes entre les navigateurs).

Ensuite il suffit que le bouton valider du formulaire1 appelle test_form1(this.form), que celui du formulaire2 appelle test_form2(this.form) et normalement ça devrait marcher

nickadele · Answer

Bonjour,

il existe de nombreux exemples sur le site de contrôles de formulaire.
Une petite recherche devrait t'apporter une solution.

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

cs_ov3rdoze · Answer

Bonjour

Personnellement pour ne rendre que certains champs obligatoires je ne teste que ceux-là : 

function check_input(formulaire){
        var msg="Attention

";
        if (formulaire.nom.value=="") {
                msg += " - Vous avez oublié le nom
";
                formulaire.nom.style.backgroundColor = "#b64046";
        }
        if (formulaire.prenom.value=="")
                msg += " - Vous avez oublié le prénom
";
                ...

        if(msg!="Attention

")
                alert(msg);
        else
                formulaire.submit();
}

et dans le bouton envoyer :
        onclick="javascript:check_input(this.form);"

Ce n'est bien sûr qu'une suggestion...

Pour tester la validité des données saisies utilise des expressions regulières.
exemple pour le mail :
var re=/^[0-9a-zA-Z\.\-_]+@[0-9a-zA-Z\.\-_]+\.[a-z]{2}[a-z]?$/;
if (! re.test(formulaire.mailg.value))
        msg+=" - Le mail n'est pas valide
";

Voila j'espère que ça peux aider...

Bonne journée

poucinette51 · Answer

Merci beaucoup pour ta réponse, en effet j'ai réadapté mon script en utilisant tes exemples, et effectivement j'arrive quasi à faire ce que je veux!! :-)
Il y a bien le msg d'erreur qui s'affiche, mais par contre il passe quand même à la page suivante, il "valide" qd meme malgré les champs manquants en fait, comment faire?!
J'ai essayé de mettre un return false mais ça ne résout rien....

cs_ov3rdoze · Answer

Si tu utilises un  pour ton bouton valider, remplace-le par un .
Sinon comme ça je vois pas il faudrait plus de détails.

poucinette51 · Answer

Yes ça venait du bouton Merciiiiiii Dernière petite question, pour vérifier des champs type "select" comment doit-on procéder? J'avais essayé qqch du genre : if (formulaire.choix1.selected=="") { msg += " - erreur "; formulaire.choix1.style.backgroundColor = "#b64046"; } mais ça ne marche pas...

cs_ov3rdoze · Answer

Suis pas sûr de comprendre... Tu veux signaler une erreur si on a gardé le choix par défaut? Si c'est le cas il me semble qu'il faut faire un tuc du style :

      if (formulaire.choix1.value=="0") {
                msg += " - erreur 
";
                formulaire.choix1.style.backgroundColor = "#b64046";
        }

Mais je garantie pas

poucinette51 · Answer

Oui tu as bien compris, c'est exactement ce que je voulais faire, et effectivement tu as raison, tu as la bonne solution 
Par contre, j'ai plusieurs formulaires, avec quelques champs qui différent, je peux utiliser ce script pour tout les formulaires?? 
Ou je fais un script différent pour chaque formulaire?!

cs_ov3rdoze · Answer

Ben en fait ça dépend si les champs a tester sont les mêmes et ont les mêmes noms : Si ton script teste un champs qui n'existe pas dans l'autre formulaire y aura une erreur (n'existe pas peux aussi vouloir dire n'a pas le même nom). Si par exemple le formulaire 1 teste Nom et Prenom et le formulaire 2 aussi pas de problème. Si le formulaire 2 teste en plus le mail il faudra un script différent. Sinon tu peux ne mettre dans le script que les champs communs à tous les formulaires et tester les autres à part : Fonction commune : function check_input(formulaire){ var msg="Attention "; if (formulaire.nom.value=="") { msg += " - Vous avez oublié le nom "; formulaire.nom.style.backgroundColor = "#b64046"; } if (formulaire.prenom.value=="") msg += " - Vous avez oublié le prénom "; formulaire.nom.style.backgroundColor = "#b64046"; } return msg; } Dans Formulaire 1 : function test(formulaire) { var msg = ""; if (check_input(formulaire) !"Attention ") msg check_input(formulaire); if(msg!="") alert(msg); else formulaire.submit(); } Dans Formulaire 2 : function test(formulaire) { var msg = ""; if (check_input(formulaire) !"Attention ") msg check_input(formulaire); var re=/^[0-9a-zA-Z\.\-_]+@[0-9a-zA-Z\.\-_]+\.[a-z]{2}[a-z]?$/; if (! re.test(formulaire.mailg.value)) msg+=" - Le mail n'est pas valide "; if(msg!="") alert(msg); else formulaire.submit(); } Et bien sûr dans le bouton tu appelle test(this.form) Dans ce cas tu peux mettre la fonction check_input() dans un fichier à part (par exemple verif.js) et l'importer dans les pages que tu veux : Voila j'espère que ça répond à ta question A+

poucinette51 · Answer

Bonjour, en fait je t'explique, mon site est en php, j'ai la page index qui contient le etc etc et qui en fait inclus les autres pages (car la partie haute , le menu et le bas se répétent sur toutes les pages), ce qui fait que je n'ai qu'une page qui contient le , je ne peux donc pas inclure de script dans les autres pages... j'espere que je suis assez claire lol Et donc j'ai au total 4 formulaires, qui contiennent tous les champs noms, prenoms, adresse, etc Mais dans le formulaire 1 il y a les champs "choix1", "choix2", "choix3"," choix4", qui sont en+, ds le formulaire 2, il y a le champ "reno" en+ des champs noms, prenoms etc et et ainsi de suite pour les 2 autres formulaires. Donc là j'ai créé le fichier verif dans lequel j'ai mis le script commun à tout les formulaires, et j'ai créé une autre page (main.js) ou j'ai incorporé le script test (formulaire) où à l'intérieur j'ai mis le test des champs "choix1" "choix2" etc..... Ca marche.... mais le message d'erreur pour les noms, prenoms etc s'affiche 2 fois de suite! et le msg d'erreur pour les champs "choix" s'affiche à part... Et pour mes autres champs dans les autres formulaires je peux les insérer dans la page "main" ? ou il faut encore que je fasse une page à part? Désolée pour mes questions mais ce n'est pas encore très clair pour moi lol Merci d'avance.

poucinette51 · Answer

merciiiiiiiiiiiiiiiiii 1000 fois!!!! lol  Ca marche "nikel"!!! ;-)
Et en fait j'ai regroupé toutes mes fonctions dans un fichier "main.js" que j'appelle dans la page index, et tout marche impec! 

J'ai une dernière question mais je ne sais pas si c'est faisable ou pas ?
Car là en fait quand on valide le formulaire vide, ok les msg d'erreur s'affiche et le background des champs se mettent d'une autre couleur comme prévu.... mais ensuite lorsqu'on veut par exemple saisir qqch dans le champ nom, le background reste apparent. Il n'est pas possible que lorsqu'on saisi qqch dans un champ le background disparaisse ?
C'est un détail mais si c'était possible ça serait PARFAIT!! 

Merci encore sinon, ton aide m'a été très précieuse, et je vais noter tout ça pour pouvoir m'en reservir et réadapter  C'est comme ça qu'on apprend après tout

cs_ov3rdoze · Answer

De rien c'est normal

Pour ce qui est du background :
dans chacun de tes champs met javascript:this.style.backgroundColor = '#FFF'; dans un onFocus ou onKeyUp ou onBlur selon ce que tu préfères.

onFocus : quand on arrive dans le champs
onKeyUp : quand on a tapé sur une touche du clavier
onBlur : quand on quitte le champs

poucinette51 · Answer

Franchement un ENORME merci à toi!!!!  Mes formulaires marchent tous super bien 
Encore merci pour toute l'aide que tu m'as apporté!!!

cs_ov3rdoze · Answer

De rien c'est un peu le principe du forum, non

Content de t'avoir aidé et bon courage pour la suite...

Script vérification formulaire, cherche aide pour aprofondir mon script !

14 réponses

Votre réponse

Discussions similaires