Vérification email

Vérification email - HTML/CSS - Programmation

Marsh Posté le 19-07-2011 à 14:31:30    

Bonjour à tous et a toutes,
Je suis en train de créer un formulaire de location de serveur (à but purement personnel, afin de savoir le faire).
donc voici les différentes étape
formulaire.php récupère les infos nécessaires qui les envoie à envoi.php
envoi.php vérifie les infos coté serveur (pour voir si ya pas un mal qui aurais désactivé javascript pour mettre de mauvaise informatio)
oui on lance install.sh dans l'envoi.php avec les variable récupérées du formulaire.
 
Ayant découvert la puissance de javascript récemment pour les formulaires j'ai décidé de codé un peu de javascript dans mon formulaire afin d'aider le client à remplir les champs et à mettre une pseudo sécurité à tout les utilisateurs.
donc sans plus attendre voici le soucis j'ai réussit à la faire la plus part des choses que je voulais mais pour la vérification email je coince. J'ai testé beaucoup de script venant du net mais aucun n'est adapté à mon formulaire actuel
voici pourquoi je viens ici afin de trouver de l'aide. J'aimerais que la vérification de l'email se fasse à la validation et non pas de rajouter un bouton que l'utilisateur serais forcé de clic pour déverrouiller le boutton submit.
 
voici le code de formulaire.php
 

Code :
  1. <html>
  2. <head>
  3. <title>inscription devpanel</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script type="text/javascript" language="javascript">
  6. function valid(f) {
  7. !/^[A-z]*$/.test(f.value)?f.value = f.value.replace(/[^0-9A-z]/g,''):null;
  8. }
  9. function envoie(formulaire) {
  10. if ( (document.getElementById('userName').value.length>0)
  11. &&(document.getElementById('userPass').value.length>0)
  12. &&(document.getElementById('game').value.length>0)
  13. &&(document.getElementById('gameName').value.length>0)
  14. &&(document.getElementById('slot').value.length>0)
  15. &&(document.getElementById('public').checked)
  16. &&(document.getElementById('rcon').value.length>0)
  17. &&(document.getElementById('tickRate').value.length>0)
  18. &&(document.getElementById('clientEmail').value.length>0)
  19. ){
  20. formlaire.submit();
  21. }
  22. else if ( (document.getElementById('userName').value.length>0)
  23. &&(document.getElementById('userPass').value.length>0)
  24. &&(document.getElementById('game').value.length>0)
  25. &&(document.getElementById('gameName').value.length>0)
  26. &&(document.getElementById('slot').value.length>0)
  27. &&(document.getElementById('prive').checked)
  28. &&(document.getElementById('gamePass').value.length>0)
  29. &&(document.getElementById('rcon').value.length>0)
  30. &&(document.getElementById('tickRate').value.length>0)
  31. &&(document.getElementById('clientEmail').value.length>0)
  32. ){
  33. formlaire.submit();
  34. }
  35. else
  36. alert('IMPOSSIBLE D\' ENVOYER LE DEMANDE DE LOCATION DE SERVEUR, VOUS AVEZ OUBLIE DE REMPLIR DES CHAMPS OBLIGATOIRES');
  37. }
  38. var jeux = new Array; //nouveau tableau
  39. jeux[0] = new Array("css", "Counter Strike Source" ); //nouveau tableau, on va donc avoir jeux[0][0]="css"
  40. jeux[1] = new Array("l4d", "Left 4 Dead" );
  41. jeux[2] = new Array("dod", "Day of Defeat Source" );
  43. var slot = new Array;
  44. // css
  45. slot["css"] = new Array;
  46. slot["css"][0] = new Array("css6", "6" );
  47. slot["css"][1] = new Array("css8", "8" );
  48. slot["css"][2] = new Array("css10", "10" );
  49. slot["css"][3] = new Array("css11", "11" );
  50. slot["css"][4] = new Array("css12", "12" );
  51. slot["css"][5] = new Array("css14", "14" );
  52. slot["css"][6] = new Array("css16", "16" );
  53. slot["css"][7] = new Array("css18", "18" );
  54. slot["css"][8] = new Array("css20", "20" );
  55. slot["css"][9] = new Array("css22", "22" );
  56. slot["css"][10] = new Array("css24", "24" );
  58. //l4d
  59. slot["l4d"] = new Array;
  60. slot["l4d"][0] = new Array("l4d8", "8" );
  61. slot["l4d"][1] = new Array("l4d12", "12" );
  63. //Dodsource
  64. slot["dod"] = new Array;
  65. slot["dod"][0] = new Array("dod6", "6" );
  66. slot["dod"][1] = new Array("dod8", "8" );
  67. slot["dod"][2] = new Array("dod10", "10" );
  68. slot["dod"][3] = new Array("dod11", "11" );
  69. slot["dod"][4] = new Array("dod12", "12" );
  70. slot["dod"][5] = new Array("dod14", "14" );
  71. slot["dod"][6] = new Array("dod16", "16" );
  72. slot["dod"][7] = new Array("dod18", "18" );
  73. slot["dod"][8] = new Array("dod20", "20" );
  74. slot["dod"][9] = new Array("dod22", "22" );
  75. slot["dod"][10] = new Array("dod24", "24" );
  78. var tickRate = new Array;
  79. //css slot1
  80. tickRate["css6"] = new Array;
  81. tickRate["css6"][0] = new Array("33", "33" );
  82. tickRate["css6"][1] = new Array("66", "66" );
  84. //css slot2
  85. tickRate["css8"] = new Array;
  86. tickRate["css8"][0] = new Array("33", "33" );
  87. tickRate["css8"][1] = new Array("66", "66" );
  89. //css slot3
  90. tickRate["css10"] = new Array;
  91. tickRate["css10"][0] = new Array("33", "33" );
  92. tickRate["css10"][1] = new Array("66", "66" );
  94. //css slot4
  95. tickRate["css11"] = new Array;
  96. tickRate["css11"][0] = new Array("33", "33" );
  97. tickRate["css11"][1] = new Array("66", "66" );
  99. //css slot5
  100. tickRate["css12"] = new Array;
  101. tickRate["css12"][0] = new Array("33", "33" );
  102. tickRate["css12"][1] = new Array("66", "66" );
  104. //css slot6
  105. tickRate["css14"] = new Array;
  106. tickRate["css14"][0] = new Array("33", "33" );
  107. tickRate["css14"][1] = new Array("66", "66" );
  109. //css slot7
  110. tickRate["css16"] = new Array;
  111. tickRate["css16"][0] = new Array("33", "33" );
  112. tickRate["css16"][1] = new Array("66", "66" );
  114. //css slot8
  115. tickRate["css18"] = new Array;
  116. tickRate["css18"][0] = new Array("3", "33" );
  117. tickRate["css18"][1] = new Array("66", "66" );
  119. //css slot9
  120. tickRate["css20"] = new Array;
  121. tickRate["css20"][0] = new Array("33", "33" );
  122. tickRate["css20"][1] = new Array("66", "66" );
  124. //css slot10
  125. tickRate["css22"] = new Array;
  126. tickRate["css22"][0] = new Array("33", "33" );
  127. tickRate["css22"][1] = new Array("66", "66" );
  129. //css slot11
  130. tickRate["css24"] = new Array;
  131. tickRate["css24"][0] = new Array("33", "33" );
  132. tickRate["css24"][1] = new Array("66", "66" );
  134. //L4d slot1
  135. tickRate["l4d8"] = new Array;
  136. tickRate["l4d8"][0] = new Array("33", "33" );
  138. //l4d slot2
  139. tickRate["l4d12"] = new Array;
  140. tickRate["l4d12"][0] = new Array("33", "33" );
  143. //dod slot1
  144. tickRate["dod6"] = new Array;
  145. tickRate["dod6"][0] = new Array("33", "33" );
  146. tickRate["dod6"][1] = new Array("66", "66" );
  147. tickRate["dod6"][2] = new Array("100", "100" );
  149. //dod slot2
  150. tickRate["dod8"] = new Array;
  151. tickRate["dod8"][0] = new Array("33", "33" );
  152. tickRate["dod8"][1] = new Array("66", "66" );
  153. tickRate["dod8"][2] = new Array("100", "100" );
  155. //dod slot3
  156. tickRate["dod10"] = new Array;
  157. tickRate["dod10"][0] = new Array("33", "33" );
  158. tickRate["dod10"][1] = new Array("66", "66" );
  159. tickRate["dod10"][2] = new Array("100", "100" );
  161. //dod slot4
  162. tickRate["dod11"] = new Array;
  163. tickRate["dod11"][0] = new Array("33", "33" );
  164. tickRate["dod11"][1] = new Array("66", "66" );
  165. tickRate["dod11"][2] = new Array("100", "100" );
  167. //dod slot5
  168. tickRate["dod12"] = new Array;
  169. tickRate["dod12"][0] = new Array("33", "33" );
  170. tickRate["dod12"][1] = new Array("66", "66" );
  171. tickRate["dod12"][2] = new Array("100", "100" );
  173. //dod slot6
  174. tickRate["dod14"] = new Array;
  175. tickRate["dod14"][0] = new Array("33", "33" );
  176. tickRate["dod14"][1] = new Array("66", "66" );
  177. tickRate["dod14"][2] = new Array("100", "100" );
  179. //dod slot7
  180. tickRate["dod16"] = new Array;
  181. tickRate["dod16"][0] = new Array("33", "33" );
  182. tickRate["dod16"][1] = new Array("66", "66" );
  183. tickRate["dod16"][2] = new Array("100", "100" );
  185. //dod slot8
  186. tickRate["dod18"] = new Array;
  187. tickRate["dod18"][0] = new Array("33", "33" );
  188. tickRate["dod18"][1] = new Array("66", "66" );
  189. tickRate["dod18"][2] = new Array("100", "100" );
  191. //dod slot9
  192. tickRate["dod20"] = new Array;
  193. tickRate["dod20"][0] = new Array("33", "33" );
  194. tickRate["dod20"][1] = new Array("66", "66" );
  195. tickRate["dod20"][2] = new Array("100", "100" );
  197. //dod slot10
  198. tickRate["dod22"] = new Array;
  199. tickRate["dod22"][0] = new Array("33", "33" );
  200. tickRate["dod22"][1] = new Array("66", "66" );
  201. tickRate["dod22"][2] = new Array("100", "100" );
  203. //dod slot11
  204. tickRate["dod24"] = new Array;
  205. tickRate["dod24"][0] = new Array("33", "33" );
  206. tickRate["dod24"][1] = new Array("66", "66" );
  207. tickRate["dod24"][2] = new Array("100", "100" );
  209. function filltheselect(liste, choix)
  210. {switch (liste)
  211.    {
  212.    case "listejeux":
  213.       raz("listeslot" );
  214.       raz("listetickRate" );
  215.       for (i=0; i<slot[choix].length; i++)
  216.          {
  217.          new_option = new Option(slot[choix][i][1],slot[choix][i][0]);
  218.          document.form_contacts.elements["listeslot"].
  219. options[document.form_contacts.elements["listeslot"].length]=new_option;
  220.          }
  221.       for (i=0; i<tickRate[choix+"v0"].length; i++)
  222.          {
  223.          new_option = new Option(tickRate[choix+"v0"][i][1],tickRate[choix+"v0"][i][0]);
  224.          document.form_contacts.elements["listetickRate"].options[document.form_contacts.
  225. elements["listetickRate"].length]=new_option;
  226.          }
  227.       break;
  228.    case "listeslot":
  229.       raz("listetickRate" );
  230.       for (i=0; i<tickRate[choix].length; i++)
  231.          {
  232.          new_option = new Option(tickRate[choix][i][1],tickRate[choix][i][0]);
  233.          document.form_contacts.elements["listetickRate"].options[document.form_contacts.
  234. elements["listetickRate"].length]=new_option;
  235.          }
  236.       break;
  237.    }
  238. }
  240. function raz(liste)
  241. {l=document.form_contacts.elements[liste].length;
  242. for (i=l; i>=0; i--)
  243.    document.form_contacts.elements[liste].options[i]=null;
  244. }
  246. function changement()
  247. {
  248.    if (document.getElementById('public').value = "public" )
  249.       document.getElementById('gamePass').disabled=true;
  250.    else
  251.       document.getElementById('gamePass').disabled=false;
  252. }
  253. function effacer()
  254. {
  255. if (document.forms["form_contacts"].elements["public"].value = "public" )
  256. {
  257. document.forms["form_contacts"].elements["gamePass"].value = "";
  258. }
  259. }
  260. function changement2()
  261. {
  262.    if (document.getElementById('prive').value = "privé" )
  263.       document.getElementById('gamePass').disabled=false;
  264.    else
  265.       document.getElementById('gamePass').disabled=true;
  266. }
  267. -->
  268. </script>
  269. <style type="text/css">
  270. <!--
  271. .Style4 { font-size: 16px;
  272. font-weight: bold;
  273. }
  274. .Style10 {font-size: 18px; font-weight: bold; }
  275. .Style11 {
  276. font-size: 36px;
  277. font-weight: bold;
  278. }
  279. -->
  280. </style>
  281. </head>
  282. <body bgcolor="#FFFFFF">
  283. <div align="center">
  284. <p align="left" class="Style11">formulaire de location de serveur </p>
  285. <p align="left" class="Style10"><font color="#FF0000">Les cases marqu&eacute;es d'une * sont obligatoires </font> </p>
  286. <form action="envoi.php" method="post" name="form_contacts" id="form_contacts" enctype="multipart/form-data" onSubmit="return checkEmail(this)">
  287. <p align="left" class="Style4">*Nom d'utilisateur (pour le ftp et le monitoring du site) :
  288. <input type="text" onkeyup="valid(this)" onblur="valid(this)" name="userName" id="userName" >
  289. </p>
  290. <p align="left" class="Style4">*Mot de passe (pour le ftp et le monitoring du site) :
  291. <input type="password" onkeyup="valid(this)" onblur="valid(this)" name="userPass" id="userPass">
  292. </p>
  293. <p align="left" class="Style4">*Quel jeux voulez vous héberger sur votre serveur ?
  294. <select name="listejeux" id="game" onChange='filltheselect(this.name, this.value)'>
  295.    <script language="javascript">
  296.    for (i=0; i<jeux.length; i++)
  297.       document.write("<option value=\"" +jeux[i][0]+ "\">" +jeux[i][1]);
  298.    </script>
  299. </select>
  300. <br>
  301. <br>
  302. *Nombre de slots ?
  303. <select name="listeslot" id="slot" onChange='filltheselect(this.name, this.value)'>
  304.    <script language="javascript">
  305.    for (i=0; i<slot["css"].length; i++)
  306.       document.write("<option value=\"" +slot["css"][i][0]+ "\">" +slot["css"][i][1]);
  307.    </script>
  308. </select>
  309. <br>
  310. <br>
  311. *Tickrate souhaité :
  312. <select name="listetickRate" id="tickRate" onChange='filltheselect(this.name, this.value)'>
  313.    <script language="javascript">
  314.    for (i=0; i<tickRate["css6"].length; i++)
  315.       document.write("<option value=\"" +tickRate["css6"][i][0]+ "\">" +tickRate["css6"][i][1]);
  316.    </script>
  317. </select>
  318. </p>
  319. <p align="left" class="Style4">*Nom du Serveur :
  320. <input type="text" name="gameName" size="60" value="Server by Devpanel" id="gameName" onfocus="this.value='';"/>
  321. </p>
  322. <p align="left" class="Style4">*Serveur public ou privé :
  323. <input type="radio" name="public" id="public" value="public" onclick="changement(); effacer()">public
  324. <input type="radio" name="public" id="prive" value="privé" onclick="changement2()">privé
  325. </p>
  326. <p align="left" class="Style4">*Mot de pass du serveur :
  327. <input name="gamePass" type="text" onkeyup="valid(this)" onblur="valid(this)" id="gamePass">
  328. </p>
  329. <p align="left" class="Style4">*Rcon password (pour éxécuter les commandes sur le serveur) :
  330. <input name="rcon" type="text" onkeyup="valid(this)" onblur="valid(this)" id="rcon">
  331. </p>
  332. <p align="left"><span class="Style4">*Adresse email à laquelle vous souhaitez envoyer les informations sur l'&eacute;tat du serveur :
  333. <input name="clientEmail" type="text" id="clientEmail" size="50">
  334. </span></p>
  335. <p align="left">
  336. <input name="envoyer" type="button" id="envoyer" value="Envoyer" onClick="envoie(this.form)">
  337. <input name="retablir" type="reset" id="retablir" value="R&eacute;tablir">
  338. </p>
  339. </form>
  340. <p>&nbsp;</p>
  341. </div>
  342. </body>
  343. </html>


 
je sais que c'est long mais si quelqu'un a du temps à perdre pour un newbie comme moi je lui serais reconnaissant.

Reply

Marsh Posté le 19-07-2011 à 14:31:30   

Reply

Marsh Posté le 19-07-2011 à 17:13:49    

Je ne vois pas la difficulte. Il suffit de modifier ta fonction "envoie" pour ajouter une condition style "&&EmailValide(document.getElementById('clientEmail').value)" dans tes deux blocs if puis de trouver une fonction qui renvoie un booleen si l'email est valide pour une chaine de caractere en entree. Ceci peut se faire a partir d'une expression régulière (RexEx) et tu va trouver des 100aines d'exemple sur le net d'une fonction de ce genre en JS.
Par exemple ici

Reply

Marsh Posté le 19-07-2011 à 17:16:39    

oui mais du coup çà va envoyer l'erreur :
alert('IMPOSSIBLE D\' ENVOYER LE DEMANDE DE LOCATION DE SERVEUR, VOUS AVEZ OUBLIE DE REMPLIR DES CHAMPS OBLIGATOIRES');
au lieu de adresse email incorrect

Reply

Marsh Posté le 19-07-2011 à 17:21:13    

Si tu prend la peine de rajouter un  

Code :
  1. else if (!EmailValide(document.getElementById('clientEmail').value)) {
  2. alert ("email invalide" )
  3. }


avant le else, surement pas. La non plus je ne vois pas la difficulte ou le probleme...
[edit] mauvaise balise code [/edit]


Message édité par fred777888999 le 19-07-2011 à 17:21:55
Reply

Marsh Posté le 19-07-2011 à 20:59:15    

j'ai essayer avec le else if et la fonction de ton liens et çà marche pas jdois surement avoir fait quelque chose de travers (j'ai modif le nom de la fonction en EmailValide mais rien à faire)

Reply

Marsh Posté le 20-07-2011 à 17:40:18    

C'est a dire ca ne marche pas ? Ca affiche une erreur intempestive ? Ca ne verifie pas correctement ton email ? Ajoute des traces a base de 'alert' dans les if et la fonction EmailValide pour voir ou tu passes, utilise firefox et firebug pour mettre des points d'arrets et tu devrais t'en sortir...

Reply

Marsh Posté le 24-07-2011 à 00:55:59    

et bien le formulaire ne s'envoie pas

Reply

Sujets relatifs:

Leave a Replay

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