Javascript ne fonctionne pas avant de soumettre au fichier php

Question

J'en apprend plus sur PHP/Javascript, en essayant de mettre en place un site Web de base. J'ai tout mis en place, mais il n'y a pas de validation sur l'enregistrement et autres joyeusetés. J'essaye d'utiliser Javascript pour valider le formulaire avant de le soumettre, mais ça ne marche pas pour moi. Voici ma page:

<script language="JavaScript" type="text/javascript"> 
OK = false; 
function validateEmail() { 
    var x = document.forms["form1"]["myemail"].value; 
    var atpos = x.indexOf("@"); 
    var dotpos = x.lastIndexOf("."); 
    if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 
} 

function notShortUsername() { 
    var x = document.forms["form1"]["myusername"].value; 
    if(x.value.length < 6) { 
     // set the focus to this input 
     OK = false; 
    } 
    OK = true; 
} 

function notShortPassword() { 
    var x = document.forms["form1"]["mypassword"].value; 
    if(x.value.length < 6) { 
     alert(helperMsg); 
     elem.focus(); 
     // set the focus to this input 
     OK = false; 
    } 
    OK = true; 
} 

function validate() { 
    notShortUsername(); 
    notShortPassword(); 
    validateEmail(); 

    if(OK) { 
     form.submit(); 
     return true; 
    } else { 
     //do something else 
     alert("You did it wrong!"); 
     return false; 
    } 
} 
</script> 

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> 
    <tr> 
    <form name="form1" method="post" action="registervalidation.php" onsubmit="return validate"> 
    <td> 
     <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
     <tr> 
      <td colspan="3"><strong>Member Login </strong></td> 
     </tr> 
     <tr> 
      <td width="78">Username</td> 
      <td width="6">:</td> 
      <td width="294"> 
      <input name="myusername" type="text" id="myusername" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Password</td> 
      <td>:</td> 
      <td> 
      <input name="mypassword" type="password" id="mypassword" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Email</td> 
      <td>:</td> 
      <td> 
      <input name="myemail" type="text" id="myemail"> 
      </td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td> 
      <input type="submit" name="Submit" value="Complete Registration"> 
      <input type="submit" name="Submit" value="Cancel"> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </form> 
    </tr> 
</table> 

J'ai aussi essayé d'utiliser ceci: http://docs.jquery.com/Plugins/Validation

Le problème avec c'est elle ne valide pas lorsque l'élément perd le focus, et soumet toujours le php de toute façon.

Answer 1

onsubmit="return validate();" 

Do pas oublier le ();

Answer 2

changement ceci:

var x = document.forms["form1"]["myusername"].value; 
if(x.value.length < 6) { 

à:

var x = document.forms["form1"]["myusername"].value; 
if(x.length < 6) { 

et ceci:

var x = document.forms["form1"]["mypassword"].value; 
if(x.value.length < 6) { 

à:

var x = document.forms["form1"]["mypassword"].value; 
if(x.length < 6) { 

Dans chaque cas, var x contient déjà la valeur de sorte que vous obtenez la longueur directement par x.length

Answer 3

Testez votre fonction de validation en dehors de la forme soumettre:

<a href="#" onclick="validate();">test</a> 

Vous verrez une erreur dans la console vous indiquant que x n'est pas défini. Ainsi, le script arrête l'exécution et ne renvoie jamais false, ce qui permet au formulaire de publier des messages.