Email Validation: JavaScript

Question

I'm trying to create a form that validates the email address. Either the "submit" button is not working or else it is the email validation script that is causing the problem. I'm new to coding and need some help. Thank you in advance!

<!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 = /^(([^<>()\[\]\\.,;:\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);
        };
            if (!validEmail($("#email").val()))) {
                    $("#error").html("Please enter a valid email address.");
            }   
        ;
    </script>
</body>

</html>

Use an `` to accept an e-mail address and you won’t have to write any JavaScript. (Also has the benefit of not rejecting valid e-mail addresses like this regular expression does.) — Ry-, Mar 23 '17 at 01:20
And where did you call this validateEmail() function? You need to provide submit form method and call this validation there. — Sajed, Mar 23 '17 at 01:39

Jonathan Dion · Accepted Answer · 2017-03-23T10:41:15.233

First, there is an error inside the validEmail function. Try this instead :

function validEmail(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);
};

Also, you need to add an event listener on the form.

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

Email Validation: JavaScript

1 Answers1