Email Validation: JavaScript

J'essaie de créer un formulaire qui valide l'adresse e-mail. Soit le bouton "submit" ne fonctionne pas, soit c'est le script de validation d'email qui cause le problème. Je suis nouveau au codage et j'ai besoin d'aide. Merci d'avance!Email Validation: JavaScript

<!doctype html> 
<html> 
    <head> 
    <title>JQuery Lesson</title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script  type="text/javascript"  
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
</script> 
    <style> 
     #wrapper{ 
     margin: 0 auto; 
     width: 500px; 
     font-family: helvetica; 
     font-size: 1.2em; 
     } 
     #error { 
     color: red; 
     margin: 20px; 
     } 
     #email { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.2em; 
     float: none; 
     margin: 0 auto; 
     } 
     #phone { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.2em; 
     float: none; 
     margin: 0 auto; 
     } 
     #password { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.3em; 
     float: none; 
     margin: 0 auto; 
     } 
     #confirmPassword { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.3em; 
     float: none; 
     margin: 0 auto; 
     } 
     .spacer { 
     font-size:0; 
     height: 20px; 
     line-height: 0; 
     } 
     label { 
     width: 90px; 
     float:left; 
     padding-top: 10px; 
     } 
     #submitButton { 
     height: 30px; 
     width: 90px; 
     font-size: 1.1em; 
     float: none; 
     margin: 0 auto; 
     } 
    </style> 
</head> 
<body> 
    <div id= "wrapper"; > 
     <form id = "validationForm"> 
      <div id = "error"></div> 
      <label for = "email"> Email </label> 
      <input id = "email" /> 
      <div class="spacer"></div> 
      <label for = "phone"> Phone </label> 
      <input id = "phone" /> 
      <div class="spacer"></div> 
      <label for = "password"> Password </label> 
      <input id = "password", type = "password" /> 
      <div class="spacer"></div> 
      <label for = "confirm password"> Confirm Password </label> 
      <input id = "confirmPassword", type = "password" /> 
      <div class="spacer"></div> 
      <button id = "submitButton" type="submit" value="submit"> Submit 
</button> 
     </form> 
    </div> 
    <script> 
     function validateEmail(email) { 
      var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)| 
(".+"))@((\[[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); 
     }; 
      if (!validEmail($("#email").val()))) { 
        $("#error").html("Please enter a valid email address."); 
      } 
     ; 
    </script> 
</body> 

</html>

Source

2017-03-23 Denise Walter

Avez-vous essayé simplement ''? – Bergi

Utilisez un 'pour accepter une adresse e-mail et vous n'aurez pas à écrire de code JavaScript. (Cela a également l'avantage de ne pas rejeter les adresses e-mail valides comme le fait cette expression régulière.) – Ryan

Et où avez-vous appelé cette fonction validateEmail()? Vous devez fournir la méthode de formulaire de soumission et appeler cette validation ici. – SaJed

Tout d'abord, une erreur se situe dans la fonction validEmail. Essayez ceci:

function validEmail(email) { 
 
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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); 
 
};

, vous devez également ajouter un écouteur d'événement sur le formulaire.

Solution: https://jsbin.com/rowecoboxi/edit?html,js,output

Source

2017-03-23 01:43:40

Email Validation: JavaScript

Répondre

Questions connexes