Sujet Précédent Sujet Suivant

Formulaire en javascript

Résolu/Fermé
@loran - Modifié par jordane45 le 6/01/2015 à 16:29
 @loran - 7 janv. 2015 à 14:29
Bonjour, svp je voulais faire un formulaire avec le javasript qui teste si tout les champs sont bien remplis et affiche des alert en cas contraire c'est a dire(les champs sont vides ou l'un des champs est mal rempli) et a la fin du remplissage correcte des informations je voulais que le visiteur soit redirigé vers une autre page indiquant qu'il a bien saisi ses données ,voici le code que j'ai fait mais sans javascript juste avec "required"!!: 

 <!DOCTYPE html>
<html>
 <head>
  <title>signUp</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="signUp.css"/>
 </head>
 <body>
  <div class="hed">
   <div class="header">
  
   <div class="section">
    <section>
     <article>
      <h1>Formulaire d'inscription</h1>
     <form method="post" method="get" enctype="multipart/form-data" action="">
      <fieldset>
       <legend>Vos coordonnées</legend>
       
        <label>Votre nom </label>:  <input type="text" name="nom" placeholder=" Votre nom" maxlength="30" required/>*<br/><br/>
        <label>Votre prenom</label>:  <input type="text" name="prenom" placeholder=" Votre prenom" maxlength="30" required/>*<br/><br/>
        <label>Votre sex : </label>
        <input type="radio" name="sex" required/><label>Homme</label>
        <input type="radio" name="sex" required/><label>Femme</label>*<br/><br/>
        <label>Votre date de naissance : </label>
        <label for="jour">jour </label>
        <select name="jour">
         <option value="jour1">1</option>
         <option value="jour2">2</option>
         <option value="jour3">3</option>
         <option value="jour4">4</option>
         <option value="jour5">5</option>
         <option value="jour6">6</option>
         <option value="jour7">7</option>
         <option value="jour8">8</option>
         <option value="jour9">9</option>
         <option value="jour10">10</option>
         <option value="jour11">11</option>
         <option value="jour12">12</option>
         <option value="jour13">13</option>
         <option value="jour14">14</option>
         <option value="jour15">15</option>
         <option value="jour16">16</option>
         <option value="jour17">17</option>
         <option value="jour18">18</option>
         <option value="jour19">19</option>
         <option value="jour20">20</option>
         <option value="jour21">21</option>
         <option value="jour22">22</option>
         <option value="jour23">23</option>
         <option value="jour24">24</option>
         <option value="jour25">25</option>
         <option value="jour26">26</option>
         <option value="jour27">27</option>
         <option value="jour28">28</option>
         <option value="jour29">29</option>
         <option value="jour30">30</option>
         <option value="jour31">31</option>
        </select>
        <label for="mois">mois </label>
        <select name="mois">
         <option value="mois1">Janvier</option>
         <option value="mois2">Fevrier</option>
         <option value="mois3">Mars</option>
         <option value="mois4">Avril</option>
         <option value="mois5">May</option>
         <option value="mois6">Juin</option>
         <option value="mois7">Juillet</option>
         <option value="mois8">Aout</option>
         <option value="mois9">Septembre</option>
         <option value="mois10">Octobre</option>
         <option value="mois11">Novembre</option>
         <option value="mois12">Descembre</option>
        </select>
        <label>Année </label>:<input type="text" name="annee" placeholder="19.." size="4"/>*<br/><br/>
        <label>Votre adresse E-mail </label>:  <input type="email" name="email" placeholder="***@***"/>*<br/><br/>
        <label for="pays">Votre pays : </label>
        <select name="pays">
         <option value="Maroc">Maroc</option>
         <option value="France">France</option>
         <option value="usa">USA</option>
         <option value="Japon">Japon</option>
        </select>*<br/><br/>
        <label>Votre numéro de tel </label>:  <input type="tel" name="tel" placeholder=" 06..........." maxlength="15" required/>*<br/><br/>
        <label>Votre adresse </label>:<br/><textarea rows="3" cols="60" placeholder=" Votre adresse" required></textarea>*<br/><br/>
        <label>Votre mot de passe </label>:  <input type="password" name="mot de passe" placeholder=" **********" maxlength="30" required/>*<br/><br/>
        <label>Repeter votre mot de passe </label>:  <input type="password" name="repeter mot de passe" placeholder=" **********" maxlength="30" required/>*<br/><br/>
       </fieldset>
       <fieldset>
        <legend>Vos coordonnées complaimentaires</legend>
        <label>choisissez la formation : </label><br/><br/>
        <input type="checkbox" name="langage C"/><label>langage C</label><br/><br/>
        <input type="checkbox" name="langage C avancé"/><label>langage C avancé</label><br/><br/>
        <input type="checkbox" name="langage C++"/><label>langage C++</label><br/><br/>
        <input type="checkbox" name="langage JAVA"/><label>langage JAVA</label><br/><br/>
        <input type="checkbox" name="langage ANDROID"/><label>langage ANDROID</label><br/><br/>
        <input type="checkbox" name="langage ARDUINO"/><label>langage ARDUINO</label><br/><br/>
        <input type="checkbox" name="langage HTML 5"/><label>langage HTML 5</label><br/><br/>
        <input type="checkbox" name="langage CSS 3"/><label>langage CSS 3</label><br/><br/>
        <input type="checkbox" name="langage javascript"/><label>langage JAVASCRIPT</label><br/><br/>
        <input type="checkbox" name="langage PHP & MYSQL"/><label>langage PHP & MYSQL</label><br/><br/>
       </fieldset>
       <label class="lab">* signifie que ce champ est obligatoire</label>
      <input  Value="Valider" Type="SUBMIT" >
       <ul class="envoyer">
       <li><a href="formTo.html" target="_blank" title="envoyer"><img src="Entypo_e79b(0)_64.png"></a></li>
       </ul></form>
     </article>   
    </section>
   </div>
  
  
     
    </ul>
 
   </footer> 
  </div>
 </body>
</html>

5 réponses

Réponse 1 / 5
Utilisateur anonyme
6 janv. 2015 à 00:15
Voilà un bon tuto sur la validation de formulaire avec jQuery

https://www.grafikart.fr/tutoriels/valider-formulaire-jquery-57

Bon maintenant HTML5 le fait aussi partiellement.

Sinon pourquoi tu as à la fois un method="get" et un method="post" dans ton form, sinon t'as page est en PHP? Si oui pour rediriger tu peux utiliser la fonction header(), sinon pour poster ton formulaire utilise l'AJAX et redirige avec window.location
0
Réponse 2 / 5
@loran
6 janv. 2015 à 14:05
salut merci d'avoir répondu, les method post et get je vais les faire apres maintenant je voulais faire un formulaire juste en javascript (pas de jquery)!!
0
Réponse 3 / 5
jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
6 janv. 2015 à 16:45
Bonjour,

les method post et get je vais les faire apres

Sachant que tu dois en choisir un.. tu ne peux pas mettre les deux dans un form !

formulaire juste en javascript (pas de jquery)!!

Jquery... c'est du javascript.... c'est juste une librairie de fonctions faites en Javascript pour aider à coder...
Maintenant.. si tu préfères le faire en "pure" javascript .. pas de soucis.


- Déjà... il faut mettre des ID à tes éléments HTML... sinon ce sera plus compliqué à manipuler.
- Tu peux aussi mettre des class fictives sur les éléments qui sont censé être REQUIRED... ainsi.. on pourra directement tous les testé
Un truc du genre : 

<script type="text/javascript">

		
// Pour les "vieux" Navigateurs < IE9
if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}		


//Vérifie tous les élements d'une CLASS pour voir si ils ne sont pas vides
function verifElementByClassName(class_name){
  var ArrElem = document.getElementsByClassName(class_name);
  var nbElemeVide = 0;
   for ( x=0;x<ArrElem.length;x++){
	  //console.log(ArrElem[x].id);
 	  if(ArrElem[x].value==null ||ArrElem[x].value ===''){
            alert(ArrElem[x].name + " est vide !"); 
             //on incrémente le nombre d'éléments vides
            nbElemeVide++; 
           }
   }

// Si aucun élément vide ... envoie du formulaire :
if(  nbElemeVide ==0 ){
   // ici.. tu pourras faire appel à un AJAX pour envoyer tes données en BDD par exemple  ou déclencher le "submit" de ton form.
document.forms["myform"].submit();
}

}


Bien sûr.. pour déclencher la vérification il te faudra le mettre dans le onclick de ton bouton 

 <input  Value="Valider" Type="button" onclick="verifElementByClassName('classe_bidon');" >


Sans oublier que pour pouvoir "submit" ta "form" il est préférable de lui donner un nom: 
 <form method="post" name="myform" enctype="multipart/form-data" action="">






0
@loran
6 janv. 2015 à 21:04
salut jordan,d'abord merci de m'informer sur ce sujet et merci encore une fois pour ton aide mais juste une petite remarque ou sont ils les "alert" dans ton code qui vont indiquer une erreur genre un champ mal rempli ou le formulaire n'est pas bien saisi ???
0
@loran
Modifié par jordane45 le 7/01/2015 à 01:22
une autre remarque @jordan j'ai pas bien compris ton code !! voici un exemple de formulaire que j'ai fait sur un retaurant avec le javascript: 

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="fich-css.css"/>
 <meta charset="UTF-8" />
 <TITLE> RESTAURANT </TITLE>
 <SCRIPT type="text/JavaScript">
 
 function prixRepas(prixrep,Nomberpers)
  {

  return prixrep*Nomberpers;
     }

 
 function calculeTarif()
  {
  
  return prixRepas(document.commande.entrer.value,document.commande.entrernbP.value)+prixRepas(document.commande.plat.value,document.commande.platnbP.value)+prixRepas(document.commande.dessert.value,document.commande.dessertnbP.value);
     }

  
 function entrerSelected()
     {
         if(document.commande.entrer.value!=0)
         document.commande.entrernbP.value=1;
     }

  
 function platSelected()
  {
         if(document.commande.plat.value!=0)
         document.commande.platnbP.value=1;
     }

  
 function dessertSelected()
  {
         if(document.commande.dessert.value!=0)
         document.commande.dessertnbP.value=1;
     }

  
 function testnombrePersonne()
 {
         if(document.commande.entrernbP.value<0)
     {
         document.commande.entrernbP.value=0;
         alert('IMPOSSIBLE !!!!!!');
           }
         if(document.commande.entrernbP.value>10)
     {
         document.commande.entrernbP.value=10;
         alert('NOMBER MAXIMALE EST 10 !!!!!!');
           }
         if(document.commande.platnbP.value<0)
          {
    document.commande.platnbP.value=0;
    alert('IMPOSSIBLE !!!!!!');
          }
         if(document.commande.platnbP.value>10)
         {
    document.commande.platnbP.value=10;
    alert('NOMBER MAXIMALE EST 10 !!!!!!');
         }   
         if(document.commande.dessertnbP.value<0)
        {
    document.commande.dessertnbP.value=0;
    alert('IMPOSSIBLE !!!!!!');
        }
        if(document.commande.dessertnbP.value>10)
  {
    document.commande.dessertnbP.value=10;
    alert('NOMBER MAXIMALE EST 10 !!!!!!');
        }    
   }

   
 function testAdresse(adr)
  {
         if(adr==""||adr=="entrer votre adresse")
        return 0;
     else
     return 1;
     }
 
 function testCommande()
  {
         if(document.commande.plat.value==0&&document.commande.entrer.value==0&&document.commande.dessert.value==0)
         return 0;
     else
     return 1;
     }
  
 </SCRIPT>
</head>

<body>
<center>
 <div class="formulaire">
       <form method="post" action="mailto:***@***" name="commande" onMouseOver="document.commande.tarif.value=calculeTarif();testnombrePersonne();" >

  <fieldset width="100px">
   <h1 >Votre commande</h1>
 <label>   </label>
 <table>
 <tr>
   <td>Entrée:</td>
   <td>
   
   <select name="entrer" onChange="entrerSelected();">
     <option name="aucune" value="0" selected >aucune</option>
     <option name="salade mixte" value="25" >salade mixte</option>
  <option name="soupe" value="20">soupe</option>
  <option name="salade fruit" value="35">salade fruit</option>
   </select>
   
   </td>
   
   <td>pour</td>
   <td><input type="number" name="entrernbP" value="0"/></td>
   <td>personnes</td>
   </tr>
   
 <tr>
   <td>Plat:</td>
   <td>
   <select name="plat" onChange="platSelected();">
     <option name="aucune" value="0" selected >aucune</option>
     <option name="tajine" value="75">tajine</option>
  <option name="pizza quatre saisons" value="80">pizza quatre saisons</option>
  <option name="couscous" value="60">couscous</option>
    
  </select>
   </td>
   
   <td>pour</td>
   <td><input type="number" name="platnbP" value="0"/></td>
   <td>personnes</td>
   <td><label>PRIX</label></td>
 </tr>
 <tr>
  <td>Dessert:</td>
   <td>
   <select name="dessert" onChange="dessertSelected();" >
     <option name="aucune" value="0" selected >aucune</option>
    <option name="glace" value="15">glace</option>
    <option name="tarte au chocolat" value="50">tarte au chocolat</option>
    <option name="jus fruits" value="45">jus fruits</option>
  </select>
   </td>
   <td>pour</td>
   <td><input type="number" name="dessertnbP" value="0"></td>
   <td>personnes</td> 
   <td><div id="prix"><input type="text" name="tarif" value="0" size="5" disabled />DH</div></td>
 </tr>
 </table>
   <div id="adresse">
    <textarea name="adresse" rows="5" cols="40" value="" onFocus="this.value='';">entrer votre adresse</textarea><br/>
   </div>
   <div id="commander">
    <button type="button"  name="Submit" value="Commander" onClick="if(testCommande())if(testAdresse(document.commande.adresse.value))commande.submit();else alert('invalide adresse');else alert('vous avez rien commander');"/>Commander</button>
   </div> 
  </fieldset>
  </form>
  </div>
</body>
</html>


EDIT : Ajout des balises de code
0
Réponse 4 / 5
jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
7 janv. 2015 à 01:28
Bonsoir,

une petite remarque ou sont ils les "alert" dans ton code qui vont indiquer une erreur genre un champ mal rempli ou le formulaire n'est pas bien saisi

Ligne 38 du code que je t'ai posté.

Mais rien ne t'empèche de rajouter un ELSE à la fin du code.. dans le bloc 
// Si aucun élément vide ... envoie du formulaire :
if(  nbElemeVide ==0 ){
   // ici.. tu pourras faire appel à un AJAX pour envoyer tes données en BDD par exemple  ou déclencher le "submit" de ton form.
document.forms["myform"].submit();
}else{
 alert("Certains champs ne sont pas remplis..");
}


voici un exemple de formulaire que j'ai fait sur un retaurant avec le javascript:

Et bien tu es donc capable de coder en Javascript la vérification pour tes champs... pourquoi alors nous poser ta question ???

Et donc au final... QUELLE est exactement ton besoin ??
(sachant que je n'écrirait pas le code pour toi.. je ne ferai que t'aider à le faire...)

@loran.. petite remarque.. jordanE s'écrit avec un "E" merci d'y penser....

Cordialement,
Jordane
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
@loran
7 janv. 2015 à 14:29
d'accord jordane un grand merci j'ai pas remarquée la Ligne 38 de ton code
merci encore une fois !!!
0

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
Compte HOTMAIL bloqué . Que faire ?
HAPOKA -
Charliemouse1922 -

27 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses