CODEWITHSUNDEEP
javascriptjqueryhtmlemail-validation
Denise Walter
Denise Walter

Reputation: 123

Email Validation: JavaScript

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>

Upvotes: 2

Views: 18915

Answers (1)

Jonathan Dion
Jonathan Dion

Reputation: 1671

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

Upvotes: 5

Related Questions