-
Notifications
You must be signed in to change notification settings - Fork 0
/
signUp.jsp
151 lines (138 loc) · 3.86 KB
/
signUp.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Register</title>
<link rel="stylesheet" type="text/css" href="signupstyle.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
</head>
<body>
<jsp:include page="header.html"></jsp:include>
<div class="content">
<h2>Register</h2>
<form action="resToLog.jsp" method="GET" onsubmit="return Validate()" name="vform">
<div class="blank">
<div>
<div>
<label>User Name: </label>
<input type="text" name="username">
<div id = "uname_error"></div>
</div>
<br>
<div>
<label>Email: </label>
<input type="text" name="email">
<div id = "email_error"></div>
</div>
<br>
<div>
<label>Password: </label>
<input type="password" name="password">
<div id = "password_error"></div>
</div>
<br>
<div>
<label>Confirm Password: </label>
<input type="password" name="conpwd">
<div id = "cpassword_error"></div>
</div>
<br>
<br>
</div>
<div class="botton">
<input type="submit" name="submit" value="Sign Up">
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
//getting all input objects
var username = document.forms["vform"]["username"];
var email = document.forms["vform"]["email"];
var password = document.forms["vform"]["password"];
var conpwd = document.forms["vform"]["conpwd"];
var emailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
//getting all error display objects
var uname_error = document.getElementById("uname_error");
var email_error = document.getElementById("email_error");
var password_error = document.getElementById("password_error");
var cpassword_error = document.getElementById("cpassword_error");
//setting all event listeners
username.addEventListener("blur", unameVerify, true);
email.addEventListener("blur", emailVerify, true);
password.addEventListener("blur", passwordVerify, true);
//validation function
function Validate()
{
if(username.value == "")
{
username.style.border = "2px solid #f44336";
uname_error.textContent = "*User name is required";
username.focus();
return false;
}
if(email.value == "")
{
email.style.border = "2px solid #f44336";
email_error.textContent = "*Email is required";
email.focus();
return false;
}
else
{
if(!email.value.match(emailFormat))
{
email.style.border = "2px solid #f44336";
email_error.textContent = "*Email Format is wrong";
email.focus();
return false;
}
}
if(password.value == "")
{
password.style.border = "2px solid #f44336";
password_error.textContent = "*Password is required";
password.focus();
return false;
}
//check if the two passwords match
if(password.value != conpwd.value)
{
password.style.border = "2px solid #f44336";
conpwd.style.border = "2px solid #f44336";
cpassword_error.innerHTML = "*The two passwords do not match";
return false;
}
}
// event handler functions
function unameVerify()
{
if(username.value !="" )
{
username.style.border = "2px solid black";
uname_error.innerHTML = "";
return true;
}
}
function emailVerify()
{
if(email.value !="" )
{
email.style.border = "2px solid black";
email_error.innerHTML = "";
return true;
}
}
function passwordVerify()
{
if(password.value !="")
{
password.style.border = "2px solid black";
password_error.innerHTML = "";
return true;
}
}
</script>