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=".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>
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./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>
-
2
Have you tried simply
<input type="email">? – Bergi Commented Mar 23, 2017 at 1:20 -
2
Use an
<input type="email" />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- ♦ Commented Mar 23, 2017 at 1:20 - And where did you call this validateEmail() function? You need to provide submit form method and call this validation there. – Sajed Commented Mar 23, 2017 at 1:39
1 Answer
Reset to default 5First, 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./rowecoboxi/edit?html,js,output