-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsignUp.html
131 lines (117 loc) · 4.85 KB
/
signUp.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/signUp.css">
</head>
<body style=" background-image: url(images/bg.jpg);">
<div class="container">
<h1>Create Account</h1>
<form class="form" id="form">
<div class="form-data">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username" autocomplete="off" />
<i class="fa fa-check-circle" aria-hidden="true"></i>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<small>Error Msg</small>
</div>
<div class="form-data">
<label for="email">Email Id</label>
<input type="text" id="email" placeholder="Enter Email Id" />
<i class="fa fa-check-circle" aria-hidden="true"></i>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<small>Error Msg</small>
</div>
<div class="form-data">
<label for="password1">Password</label>
<input type="password" id="password1" placeholder="Enter Password" />
<i class="fa fa-check-circle" aria-hidden="true"></i>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<small>Error Msg</small>
</div>
<div class="form-data">
<label for="password2">Re-Enter Password</label>
<input type="password" id="password2" placeholder="Enter Password Again" />
<i class="fa fa-check-circle" aria-hidden="true"></i>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<small>Error Msg</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script>
var form = document.getElementById("form");
var username = document.getElementById("username");
var email = document.getElementById("email");
var password1 = document.getElementById("password1");
var password2 = document.getElementById("password2");
var msg = document.querySelector("small");
form.addEventListener("submit", function (e) {
e.preventDefault();
checkInput();
});
function checkInput() {
let i = 0;
const usernameValue = username.value.trim();
if (usernameValue === "") {
showError(username, "Username can not be blank");
} else if (!isUsernameValid(usernameValue)) {
showError(username, "Username is not valid");
} else {
showSuccess(username);
i++;
}
const emailValue = email.value.trim();
if (emailValue === "") {
showError(email, "Email can not be blank");
} else if (!isEmailValid(emailValue)) {
showError(email, "Email id is not valid");
} else {
showSuccess(email);
i++;
}
const password1Value = password1.value.trim();
if (password1Value === "") {
showError(password1, "Password can not be blank");
} else {
showSuccess(password1);
i++;
}
const password2Value = password2.value.trim();
if (password2Value === "") {
showError(password2, "Re enter your password");
} else if (password2Value != password1Value) {
showError(password2, "Passwords does not match");
} else {
showSuccess(password2);
i++;
}
if (i == 4) {
window.location.href = "login.html";
}
}
function showError(input, msg) {
const formControl = input.parentNode;
formControl.className = "form-data error";
const small = formControl.querySelector("small");
small.innerHTML = msg;
}
function showSuccess(input) {
const formControl = input.parentNode;
formControl.className = "form-data success";
}
function isEmailValid(email) {
return /^([a-zA-Z0-9\.\-]+)@([a-zA-Z0-9]+)\.([a-zA-Z]{2,3})$/.test(
email
);
}
function isUsernameValid(username) {
return /^([a-z0-9]+)$/.test(username);
}
</script>
</body>
</html>