verifier le contenu des champs masqué/affichés selon le choix de la ca

verifier le contenu des champs masqué/affichés selon le choix de la ca - Javascript/Node.js - Programmation

Marsh Posté le 07-10-2016 à 09:19:03    

Bonjour à tous !
Je suis à la recherche de l’aide au niveau de mon code JavaScript.
Le problème est au niveau de ma fonction "verif_formulaire", cette fonction a pour rôle de vérifier si le visiteur a rempli les champs obligatoires masqués qui s'affichent ou non masque. Puisque le visiteur choisi la catégorie dans le List box et les champs correspondants à cette catégorie s'affichent y compris des champs obligatoires et non obligatoires. En cliquant sur le bouton envoyer sans remplir ces champs le message d'alerte s'affiche pour informer le visiteur que les champs obligatoire ne sont pas remplis. Ainsi, dans la pratique ça marche bien avec la catégorie "offre d'emploi" qui est le premier, mais avec la catégorie "voiture" qui est le second, la fonction ne vérifie pas la saisie de tous les champs obligatoires et elle déclenche l'envoie du formulaire à la page de traitement. c'est ça mon soucis . pour tester cela, il suffit d'utiliser le code suivant: :o  
 
 

Code :
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Deposez une annonce</title> 
  6. </head> 
  7. <body> 
  8. <form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">  
  9. <div> 
  10. <label for="categorie"><strong >Categorie * :</strong ></label> 
  11. <div> 
  12. <select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()"> 
  13. <option value='0' selected>-&#45;Choississez-&#45;</option>  
  14. <option style='background-color:#f2f2f2' disabled id='cat71' >-&#45; EMPLOI -&#45;</option> 
  15. <option value='1' id='cat33'>Offres d'emploi</option> 
  16. <option style='background-color:#f2f2f2' disabled id='cat1' >-&#45; VEHICULES -&#45;</option> 
  17. <option value='2' id='cat2' >Voitures</option> 
  18. <option value='3' id='cat3' >Motos</option> 
  19. <option value='4' id='cat38' >Autres</option> 
  20. </select> 
  21. </div> 
  22. </div> 
  23.  
  24. <div> 
  25. <label><strong >Vous êtez * :</strong ></label> 
  26. <label class="radio inline"> 
  27. <input id="company" name="company" value="Particulier" type="radio" >Particulier 
  28. </label> 
  29. <label class="radio inline"> 
  30. <input id="company" name="company" value="Professionnel" type="radio">Professionnel 
  31. </label> 
  32. </div> 
  33.  
  34. <div> 
  35. <label for="objet"><strong >Type d'annonce* :</strong></label> 
  36. <div> 
  37. <select id="type_annonce" name="type_annonce"> 
  38. <option value="">-&#45;Choississez-&#45;</option> 
  39. <option value=1>Offres</option>  
  40. <option value=2>Demandes</option> 
  41. <option value=3>Location</option>  
  42. </select> 
  43. </div> 
  44. </div> 
  45.  
  46. <div> 
  47. <label id="sujet_for" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label> 
  48. <label id="sujet_for_offre_demploi" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label> 
  49. <div > 
  50. <input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" > 
  51. </div> 
  52. </div> 
  53.  
  54.  
  55. <div> 
  56. <label id="message" style="display:block;" for="message"><strong >Texte de l'annonce * :</strong></label> 
  57. <label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong >Description du poste * :</strong></label> 
  58. <div> 
  59. <textarea id="message" name="message" rows="7" cols="60"></textarea> 
  60. </div> 
  61. </div> 
  62. <!-- groupe 2-->  
  63. <div id="groupe2" style="display:none;"> 
  64. <div style="background-color:#f9f9f9;"> 
  65. <div> 
  66. <div> 
  67. <label id="marque_for" for="marque"><strong >Marque </strong></label> 
  68. <select name="marque" id="marque" > 
  69. <option value="" selected>&#171;Choisissez&#187;</option> 
  70. <optgroup label="Marques Courantes">  
  71. <option value="Audi" >Audi </option> 
  72. <option value="Bmw" >Bmw </option> 
  73. <option value="Volkswagen" >Volkswagen </option>  
  74. </optgroup> 
  75. <optgroup label="Autres Marques"> 
  76. <option value="Mastretta" > Mastretta </option> 
  77. <option value="Maybach" > Maybach </option> 
  78. </optgroup> 
  79. </select> 
  80. </div> 
  81. <div> 
  82. <label for="model_year" ><strong >Année Modèle </strong></label> 
  83. <div> 
  84. <select name="model_year" id="model_year" > 
  85. <option value="" selected>&#171;Choisissez&#187;</option> 
  86. <option value="2014">2014</option> 
  87. <option value="2015">2015</option> 
  88. <option value="2016">2016</option> 
  89. </select> 
  90. </div></div> 
  91. </div> 
  92. <div> 
  93. <div> 
  94. <label for="carburant"><strong >Carburant *</strong></label> 
  95. <div > 
  96. <select name="carburant" id="carburant" > 
  97. <option value="" selected>&#171;Choisissez&#187;</option> 
  98. <option value="Essence" >Essence</option> 
  99. <option value="Diesel" >Diesel</option> 
  100. <option value="GPL" >GPL</option> 
  101. <option value="Electrique" >Electrique</option> 
  102. <option value="Autre" >Autre</option> 
  103. </select> 
  104. </div></div>  
  105.  
  106. <div> 
  107. <label id="model_for" for="modele"><strong >Modèle *</strong></label> 
  108. <div class="controls"> 
  109. <input name="model" id="model" type="text" value=""> 
  110. </div></div> 
  111. </div> 
  112.  
  113. <div> 
  114. <div> 
  115. <label for="boite_vitesse"><strong >Boite de vitesse *</strong></label> 
  116. <div > 
  117. <select name="boite_vitesse" id="boite_vitesse"> 
  118. <option value="" selected>&#171;Choisissez&#187;</option> 
  119. <option value="manuelle" >Manuelle</option> 
  120. <option value="automatique" >Automatique</option> 
  121. </select> 
  122. </div></div> 
  123.  
  124. <div > 
  125. <label for="kilometrage"><strong ><strong>Kilometrage: km *</strong></label> 
  126. <div class="controls"> 
  127. <input name="kilometrage" id="kilometrage" type="text" value=""> 
  128. </div> 
  129. </div> 
  130. </div> 
  131. </div><!--fin div style categ--> 
  132. <!--fin roupe--> </div> 
  133.  
  134. <!-- groupe33--> 
  135. <div id="groupe33" style="display:none"> 
  136. <div style="background-color:#f9f9f9;"> 
  137. <div> 
  138. <div> 
  139. <label for="Type_de_contrat"><strong >Type de contrat *</strong></label> 
  140. <div > 
  141. <select name="Type_de_contrat" id="Type_de_contrat">  
  142. <option value="0" selected>&#171;Choisissez&#187;</option>  
  143. <option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Int&eacute;rim</option><option value="4" >Ind&eacute;pendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>  
  144. </select> 
  145. </div></div> 
  146.  
  147. <div> 
  148. <label><strong >Travail à :</strong ></label> 
  149. <label > 
  150. <input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span> 
  151. </label> 
  152. <label > 
  153. <input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span> 
  154. </label> 
  155. </div> 
  156.  
  157. <div > 
  158. <label ><strong >Vous souhaitez recevoir les candidatures via :</strong ></label> 
  159. <label > 
  160. <input type="radio" name="adreply_type" value="1" checked="checked">  
  161. <span class="text mrl">Votre email</span> 
  162. </label> 
  163. <label > 
  164. <input type="radio" name="adreply_type" value="2" >  
  165. <span class="text">Votre site web</span> 
  166. </label> 
  167. </div> 
  168. </div> 
  169. <div> 
  170. <div > 
  171. <label for="Secteur_d_activite"><strong >Secteur d'activité </strong></label> 
  172. <div > 
  173. <select name="jobfield" id="jobfield" >  
  174. <option value="0" selected>&#171;Choisissez&#187;</option>  
  175. <option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >H&ocirc;tellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >M&eacute;decine/Sant&eacute;</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >T&eacute;l&eacute;com/Internet/M&eacute;dias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>  
  176. </select> 
  177. </div></div> 
  178.  
  179. <div > 
  180. <label for="Fonction"><strong >Fonction </strong></label> 
  181. <div> 
  182. <select name="jobduty" id="jobduty" class="select">  
  183. <option value="0" selected>&#171;Choisissez&#187;</option>  
  184. <option value="1" >Administration/Services g&eacute;n&eacute;raux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilit&eacute;/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction G&eacute;n&eacute;rale</option><option value="16" >Etudes/Recherches/Ing&eacute;nieries</option><option value="15" >Formation/Education</option><option value="7" >H&ocirc;tellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >M&eacute;decine/Sant&eacute;</option><option value="12" >M&eacute;nage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Op&eacute;rations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >S&eacute;curit&eacute;/D&eacute;fense/Gardiennage</option><option value="14" >Services &agrave; la personne</option><option value="20" >Service Client/Accueil</option>  
  185. </select> 
  186. </div></div> 
  187.  
  188. <div> 
  189. <label for="experience"><strong >Expérience * </strong></label> 
  190. <div> 
  191. <select name="jobexp" id="jobexp">  
  192. <option value="0" selected>&#171;Choisissez&#187;</option>  
  193. <option value="1" >0 &agrave; 2 ans</option><option value="3" >2 &agrave; 5 ans</option><option value="5" >5 ans et plus</option>  
  194. </select> 
  195. </div></div> 
  196. </div> 
  197.  
  198. <div> 
  199. <div> 
  200. <label for="jobstudy"><strong >Niveau d'études *</strong></label> 
  201. <div> 
  202. <select name="jobstudy" id="jobstudy" class="select">  
  203. <option value="0" selected>&#171;Choisissez&#187;</option>  
  204. <option value="1" >Sans dipl&ocirc;me</option><option value="2" >BEPC/BET</option><option value="3" >Employ&eacute;/Ouvrier sp&eacute;cialis&eacute;/Bac</option><option value="4" >Technicien/Employ&eacute;/Bac+2</option><option value="5" >Agent de ma&icirc;trise/Bac+3</option><option value="6" >Ing&eacute;nieur/Cadre/Bac+5 ou plus</option>  
  205. </select> 
  206. </div> 
  207. </div> 
  208.  
  209. <div> 
  210. <label class="control-label" for="adreply_redirect"><strong >Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label> 
  211. <div class="controls"> 
  212. <input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude"> 
  213. </div> 
  214. </div> 
  215. </div> 
  216. </div><!--fin div style categ--> 
  217. </div><!--fin groupe 33--> 
  218.  
  219. <div style="background:#f2f2f2;"> 
  220. <h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;">Vos informations</h3> 
  221. </div><!--fin div style categ--> 
  222. <div > 
  223. <label for="prenom"><strong >Votre prénom * :</strong></label> 
  224. <div> 
  225. <input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" > 
  226. </div> 
  227. </div> 
  228. </div> 
  229.  
  230. </div> 
  231. </div> 
  232. <div > 
  233. <p class="text-right"><strong>Champs obligatoires *</strong></p> 
  234. <hr> 
  235. <div> 
  236. <label for="valider">Valider</label> 
  237. <input type="submit" name="envoye" value="Valider"> 
  238. <input type="reset" value="Initialiser"> 
  239. </div> 
  240. </form> 
  241. [code=js] 
  242. <script> 
  243. // script champ hidden  
  244. function afficherAutre() { 
  245. var so = document.getElementById("sujet_for_offre_demploi" ); 
  246. var s = document.getElementById("sujet_for" ); 
  247. var m = document.getElementById("message" ); 
  248. var mo = document.getElementById("message_offre_demploi" ); 
  249. var gp2 = document.getElementById("groupe2" ); 
  250. var gp33 = document.getElementById("groupe33" ); 
  251.  
  252. // cat1  
  253. if (document.form4.categorie.value == 1) 
  254. { 
  255. if (so.style.display == "none" ) 
  256. {so.style.display = "block";} 
  257.  
  258. if (s.style.display == "block" ) 
  259. {s.style.display = "none";} 
  260.  
  261. if (m.style.display == "block" ) 
  262. {m.style.display = "none";} 
  263.  
  264. if (mo.style.display == "none" ) 
  265. {mo.style.display = "block";} 
  266.  
  267. if (gp33.style.display == "none" ) 
  268. {gp33.style.display = "block";} 
  269.  
  270. } 
  271. else 
  272. { 
  273. so.style.display = "none"; 
  274. s.style.display = "block"; 
  275. m.style.display = "block"; 
  276. mo.style.display = "none"; 
  277. gp33.style.display = "none"; 
  278. } 
  279. // gp2  
  280. if (document.form4.categorie.value == 2) 
  281. { 
  282.  
  283. if (gp2.style.display == "none" ) 
  284. {gp2.style.display = "block";} 
  285. } 
  286. else 
  287. { 
  288. gp2.style.display = "none"; 
  289. } 
  290. } 
  291.  
  292. function verif_formulaire() 
  293. { 
  294. var gp2 = document.getElementById("groupe2" ); 
  295. var gp33 = document.getElementById("groupe33" ) 
  296.  
  297. if(document.form4.categorie.value == "0" ) { 
  298. alert("votre categorie ?" ); 
  299. document.form4.categorie.focus(); 
  300. return false; 
  301. } 
  302.  
  303. if(document.form4.company.value == "" ) { 
  304. alert("veuillez cocher la qualification" ); 
  305. document.getElementById("company" ).focus(); 
  306. return false; 
  307. } 
  308.  
  309. if(document.form4.type_annonce.value == "" ) { 
  310. alert("Votre type d'nnonce ?" ); 
  311. document.form4.type_annonce.focus(); 
  312. return false; 
  313. } 
  314.  
  315. if(document.form4.sujet.value == "" ) { 
  316. alert("Sujet de votre annonce ?" ); 
  317. document.form4.sujet.focus(); 
  318. return false; 
  319. } 
  320.  
  321. if(document.form4.message.value == "" ) { 
  322. alert("Votre message ?" ); 
  323. document.form4.message.focus(); 
  324. return false; 
  325. } 
  326.  
  327. if(document.form4.prenom.value == "" ) { 
  328. alert("Votre prenom ?" ); 
  329. document.form4.prenom.focus(); 
  330. return false; 
  331. } 
  332.  
  333. // Champs Masqués/Affichés 
  334. //gp33 
  335. if(document.form4.Type_de_contrat.value == "0" ) { 
  336. if (gp33.style.display == "block" ){ 
  337. alert("Veuillez indiquer le type de contrat." ); 
  338. document.form4.Type_de_contrat.focus(); 
  339. return false; 
  340. } 
  341. } 
  342.  
  343. if(document.form4.jobexp.value == "0" ) { 
  344. if (gp33.style.display == "block" ){ 
  345. alert("Veuillez choisir un type." ); 
  346. document.form4.jobexp.focus(); 
  347. return false; 
  348. } 
  349. } 
  350.  
  351. if(document.form4.adreply_redirect.value == "" ) { 
  352. if (gp33.style.display == "block" ){ 
  353. alert("Veuillez indiquer l'adresse de redirection." ); 
  354. document.form4.adreply_redirect.focus(); 
  355. return false; 
  356. } 
  357. } 
  358.  
  359. if(document.form4.jobstudy.value == "0" ) { 
  360. if (gp33.style.display == "block" ){ 
  361. alert("Veuillez selectionner le niveau d'étude." ); 
  362. document.form4.jobstudy.focus(); 
  363. return false; 
  364. } 
  365. } 
  366.  
  367. // Champs masqués/ affichés 
  368. // gp2 
  369. if(document.form4.model.value == "" ) { 
  370. if (gp2.style.display == "block" ){ 
  371. alert("Veuillez indiquer le modèle." ); 
  372. document.form4.model.focus(); 
  373. return false; 
  374. } 
  375. } 
  376.  
  377. if(document.form4.boite_vitesse.value == "" ) { 
  378. if (gp2.style.display == "block" ){ 
  379. alert("Veuillez selectionner la boite de vitesse." ); 
  380. document.form4.boite_vitesse.focus(); 
  381. return false; 
  382. } 
  383. } 
  384.  
  385. if(document.form4.km.value == "" ) { 
  386. if (gp2.style.display == "block" ){ 
  387. alert("Veuillez indiquer le kilometrage." ); 
  388. document.form4.km.focus(); 
  389. return false; 
  390. } 
  391. } 
  392.  
  393. if(document.form4.carburant.value == "" ) { 
  394. if (gp2.style.display == "block" ){ 
  395. alert("Veuillez selectionner le carburant." ); 
  396. document.form4.carburant.focus(); 
  397. return false; 
  398. } 
  399. } 
  400. } 
  401. </script>


</body>
</html>
 
[/code]

Reply

Marsh Posté le 07-10-2016 à 09:19:03   

Reply

Marsh Posté le 07-10-2016 à 13:29:07    

Bonjour,
 
Un exemple précis? Car en effet chez moi ça fonctionne avec :
 
Catégorie : voiture
Vous êtes : particulier
type annonce : offre
Titre de l'annonce : aaa
Texte de l'annonce : aaa
Carburant : diesel
Modèle :
Boîte de vitesse : manuelle
Kilométrage km : aaa
Votre prénom : aaa


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 07-10-2016 à 15:08:53    

Merci de la réponse !
Vous devez tester les champs obligatoires affichés non rempli par le visiteur tout en validant le formulaire. Vous allez remarquer qu’à la catégorie "voiture", la fonction JS ne vérifie pas si tous les champs obligatoires sont remplis. Au contraire, l'envoie du formulaire s'en suit après vérification de 3/4 champs obligatoires. C’est ça mon souci. Le projet est bloqué depuis plusieurs jours.

Reply

Marsh Posté le 07-10-2016 à 15:49:19    

C'est bien ce que fais mon exemple? Le champ "modèle" n'est pas rempli, j'ai un avertissement et le formulaire n'est pas transmis. J'ai essayé avec d'autres champs obligatoires et même résultat.
 
D'où : pouvez-vous donner un exemple précis?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 07-10-2016 à 15:59:50    

Code :
  1. document.form4.km.value


 
La console dit que l'objet "km" n'existe pas et bizarrement elle a raison, il fallait mettre l'objet "kilometrage".
Pour le carburant vous mettez :
 

Code :
  1. document.form4.carburant.value == ""


 
Cette condition n'est jamais vraie puisqu'il s'agit d'une sélection...
 
 
Bref vérifiez méticuleusement ce que vous avez fait.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 07-10-2016 à 17:47:14    

Merci MaybeEijOrNot !
C’est exactement ça, ça marche !
Comment  avez-vous procéder pour trouver l'erreur ?car, là j'ai rien appris ?
Il a fallu que je vienne chez vous pour trouver la solution.
 
Vraiment merci !
Le projet avance d'un pas géant. Et je vais vérifier sur votre profile s'il y'a un numéro de téléphone et je vais vous appeler.
Vraiment merci, merci et je déclare que le sujet est clos

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed