175
rated 0 times
[
178]
[
3]
/ answers: 1 / hits: 18755
/ 7 Years ago, thu, march 23, 2017, 12:00:00
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>
More From » jquery
