Validation d'un formulaire Avec Javascript :
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>New Web Project</title> | |
| <style type="text/css"> | |
| .documentation{ | |
| color: blue; | |
| font-size: small; | |
| } | |
| label{ | |
| font-weight:bold; | |
| } | |
| .formulaire{ | |
| text-align: center; | |
| width: 50%; | |
| margin: auto; | |
| background-color: gray; | |
| border: 2px solid #000; | |
| } | |
| span{ | |
| font-weight: bold; | |
| color:red; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function isValid(){ | |
| //Réinitater les chamo d'erreur | |
| document.getElementById('res_nom').innerHTML = ""; | |
| document.getElementById('res_email').innerHTML = ""; | |
| document.getElementById('res_grp').innerHTML = ""; | |
| document.getElementById('res_accpt').innerHTML = ""; | |
| //Recuperer les valeur de input | |
| var doc = document.f; | |
| var nom = doc.nom.value; | |
| var email = doc.email.value; | |
| var salaire = doc.salaire.value; | |
| // #### Question 3 ###/ | |
| if(nom == ''){ | |
| document.getElementById('res_nom').innerHTML = "le champ nom est obligatoire"; | |
| }else if (nom.length <= 2){ | |
| document.getElementById('res_nom').innerHTML = "le min 3 char"; | |
| } | |
| if(email == ''){ | |
| document.getElementById('res_email').innerHTML = "le champ email est obligatoire"; | |
| }else if(email.indexOf("@") == -1){ | |
| document.getElementById('res_email').innerHTML = "le champ email contient au moins @ "; | |
| } | |
| //alert(salaire); | |
| if(salaire == ''){ | |
| document.getElementById('res_salaire').innerHTML = "le champ est obligatoire"; | |
| }else if(isNaN(salaire) == true){ | |
| document.getElementById('res_salaire').innerHTML = "le champ salaire doit etre numerique "; | |
| }else if( parseInt(salaire) < 999 || parseInt(salaire) > 9999){ | |
| document.getElementById('res_salaire').innerHTML = "le champ salaire entre 999 et 9999"; | |
| } | |
| var compteG = 0; | |
| if(document.f.seul.checked == true){ | |
| compteG = compteG + 1; | |
| } | |
| if(document.f.enfant.checked == true){ | |
| compteG = compteG + 1; | |
| } | |
| if(document.f.couple.checked == true){ | |
| compteG = compteG + 1; | |
| } | |
| if(document.f.groupe.checked == true){ | |
| compteG = compteG + 1; | |
| } | |
| alert(compteG); | |
| if(compteG < 2){ | |
| document.getElementById('res_grp').innerHTML = "selection au mois 2 choix"; | |
| } | |
| if(document.f.accept.checked == false){ | |
| document.getElementById('res_accpt').innerHTML = "veuillez accepter"; | |
| } | |
| }// 5 | |
| function testdes(){ | |
| if(document.f.destination.value == "europ"){ | |
| document.getElementById('remis').innerHTML = "remise 10%"; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <form class="formulaire" name="f"> | |
| <h2>Préparez vos vacaonces d'été</h2> | |
| <hr /> | |
| <label for="nom">Nom</label> : <input type="text" name="nom" id="nom" size="40" /> | |
| <span id="res_nom"></span><br /> | |
| <label for="email">Adress E-Mail</label> : <input type="text" name="email" id="email" size="40" /> | |
| <span id="res_email"></span><br /> | |
| <label for="salaire">Salaire</label> : <input type="text" name="salaire" id="salaire" size="40" /> | |
| <span id="res_salaire"></span><br /> | |
| <label for="destination">Choisissez un contient de destination</label> <br /> | |
| <select name="destination" id="destination" onchange="testdes()"> | |
| <option>Afrique</option> | |
| <option>europ</option> | |
| <option>American</option> | |
| </select> | |
| <div id="remis"></div> | |
| <br/> | |
| <label for="nom">Conditions spéciales groups</label>(Choisir deux option maximum) | |
| <table width="100%"> | |
| <tr> | |
| <td><input type="checkbox" name="seul" value="seul" /> Seul</td> | |
| <td><input type="checkbox" name="enfant" value="enfant" /> Enfant </td> | |
| </tr> | |
| <tr> | |
| <td><input type="checkbox" name="couple" value="couple" /> Couple</td> | |
| <td><input type="checkbox" name="groupe" value="groupe" /> Groups</td> | |
| </tr> | |
| </table> | |
| <span id="res_grp"></span><br /> | |
| <label for="">souhaitez-vous être logé</label><br/> | |
| <table width="100%"> | |
| <tr> | |
| <td><input type="radio" name="loge" value="hotel" /> Hotel</td> | |
| <td><input type="radio" name="loge" value="chalet" /> Chalet</td> | |
| </tr> | |
| <tr> | |
| <td><input type="radio" name="loge" value="comping" /> Comping</td> | |
| <td><input type="radio" name="loge" value="villa" /> Villa</td> | |
| </tr> | |
| </table><br/> | |
| <label for="cmment">Veuillez noter vos demmande et infos complémentaires ci-apres</label><br/> | |
| <textarea name="cmment" id="cmment" cols="40" rows="15"></textarea><br/> | |
| <input type="checkbox" name="accept" id="accept" /><label for="accept">J'ai lu et accepté les conditions</label> <br> | |
| <span id="res_accpt"></span><br /> | |
| <div class="documentation"> La documentation vous est adressée par retour . Merci de votre visite</div> | |
| <br/> | |
| <input type="submit" value="Envoyer" onclick="isValid(); return false;" /> <input type="reset" value="Réinisialiser" /> | |
| </form> | |
| </body> | |
| </html> | |