Soumettre le formulaire seulement si l'email est valide

Question

J'ai besoin d'un moyen de soumettre un formulaire seulement si l'email est valide. Si l'email n'est pas valide alors montrez seulement une alerte (ci-dessous vous pouvez voir mon code).

JAVASCRIPT:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test(email); 
} 


function continueornot() { 
    if(validateEmail(document.getElementById('emailfield').value)){ 
    // ok 
    }else{ alert("email not valid"); return false;} 
} 

HTML:

<form method="post" action="register.php" enctype="multipart/form-data"> 
<table> 
<tr><td>Email:</td></tr> 
<tr><td><input type="text" size="30" name="email" id="emailfield"> </td></tr> 
<tr><td>Password:</td></tr> 
<tr><td><input type="password" size="30" name="password"> </td></tr> 
</table> 
<input name="steptwo" value="Create Account" type="submit" onclick="continueornot();"/> 
</form> 

Le problème est que le formulaire est soumis, même si l'e-mail est pas valide.

Comment puis-je résoudre ce problème?

Answer 1

Vous devez associer return continueornot(); à l'événement onsubmit du formulaire, pas l'événement click du bouton.

Voir ce violon: http://jsfiddle.net/NdSmu/

Answer 2

function continueornot() { 
    if(validateEmail(document.getElementById('emailfield').value)){ 
    return true; 
    }else{ alert("email not valid"); return false;} 
} 

Answer 3

Vous avez besoin de la valeur de retour.

function continueornot() { 
    if(validateEmail(document.getElementById('emailfield').value)){ 
     // ok 
     return true; 
    }else{ alert("email not valid"); return false;} 
} 


onclick="return continueornot();" 

Answer 4

<form method="post" action="register.php" enctype="multipart/form-data" onsubmit=" return continueornot();"> 

Answer 5

La propre façon d'y parvenir est d'utiliser le modèle HTML5 attribut ainsi que javascript:

<input id="emailField" type="email" pattern="emailRegexHere"> 

support du navigateur varie pour cet attribut, mais il permettra d'améliorer.

Le balisage suivant devrait atteindre votre alerte aussi:

<form method="post" action="register.php" enctype="multipart/form-data" onsubmit="return continueornot();"> 

Dans mes alertes d'opinion ne sont pas la voie à suivre ici - ils donnent une terrible expérience de l'utilisateur. Jetez un oeil à certaines bibliothèques de validation javascript qui afficheront les erreurs d'une manière plus conviviale.

Answer 6

vous pouvez simplement utiliser validateur d'expression régulière pour valider le champ du courrier électronique au lieu de la fonction javascript

Answer 7

Est-ce le retour vrai; la seule chose que vous avez ajouté? Vous n'avez pas besoin de retourner true pour soumettre, vous n'avez juste pas besoin de retourner false, bien que le problème de l'OP soit qu'il soit soumis malgré le retour de false. (Parce que toute valeur de retour est ignorée dans ce cas car l'attribut d'événement inline ne l'utilise pas.) -