-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (104 loc) · 6.44 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source Code Of Form Validation</title>
<!--------------- CSS --------------------->
<link rel="stylesheet" href="style.css">
<!--------------- Font Awesome --------------------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="form_box">
<!--------------- Toggle Buttons For Login & Register Form --------------------->
<div class="btn_box">
<div id="btn"></div>
<button type="button" class="toggle_btn" onclick="login()">Log in</button>
<button type="button" class="toggle_btn" onclick="register()">Register</button>
</div>
<!--------------- Social Icons --------------------->
<div class="social_icons">
<a href=""><i class="fa-brands fa-google icon"></i></a>
<a href=""><i class="fa-brands fa-facebook-f icon"></i></a>
<a href=""><i class="fa-brands fa-twitter icon"></i></a>
</div>
<!--------------- Login Form --------------------->
<form id="login" class="input_group">
<div class="form_div">
<input type="text" class="form_input" placeholder=" " autocomplete="off" required>
<label for="" class="form_label">User Name</label>
</div>
<div class="form_div">
<input type="password" class="form_input" placeholder=" " autocomplete="off" required>
<label for="" class="form_label">Password</label>
</div>
<input type="checkbox" class="checkbox"><span class="check_text">Remember Password</span>
<button type="submit" class="submit_btn">Log in</button>
</form>
<!--------------- End Login Form --------------------->
<!--------------- Register Form --------------------->
<form id="register" class="input_group">
<div class="form_div">
<input type="text" id="user_name_input" name="user_name_input" class="form_input" placeholder=" " autocomplete="off" required>
<label for="user_name_input" class="form_label">User Name</label>
</div>
<span id="user_name_error" class="hide danger-color error-msg">Invalid Input</span>
<span id="user_name_empty" class="hide danger-color error-msg">User Name Can not Be Empty</span>
<div class="form_div">
<input type="email" id="email_input" class="form_input" placeholder=" " autocomplete="off" required>
<label for="email_input" class="form_label">Email</label>
</div>
<span id="email_error" class="hide danger-color error-msg">Invalid Email</span>
<span id="email_empty" class="hide danger-color error-msg">Email Can not Be Empty</span>
<div class="form_div">
<input type="tel" id="phone_input" class="form_input" placeholder=" " autocomplete="off" required>
<label for="phone_input" class="form_label">Phone</label>
</div>
<span id="phone_error" class="hide danger-color error-msg">Phone Number Should Have 10 Digits</span>
<span id="phone_empty" class="hide danger-color error-msg">Phone Can not Be Empty</span>
<div class="form_div">
<input type="password" id="password_input" class="form_input" onkeyup="passwordvalidation(this.value)" placeholder=" " autocomplete="off" required>
<label for="password_input" class="form_label">Password</label>
<!--------------- Password Hide & Show Icon --------------------->
<span class="showbtn"><i id="showbtn" class="fa-solid fa-eye"></i></ion-icon></span>
</div>
<span id="password_error" class="hide danger-color error-msg">Password Should Have Letters, Special Symbols & Numbers</span>
<span id="password_empty" class="hide danger-color error-msg">Password Can not Be Empty</span>
<!--------------- Password Validation --------------------->
<div class="password_validation">
<ul>
<li id="lowChar">At least one lowercase chracter</li>
<li id="upChar">At least one uppercase chracter</li>
<li id="number">At least one number</li>
<li id="speChar">At least one special chracter</li>
<li id="eigChar">At least 8 chracters</li>
</ul>
</div>
<!--------------- End Password Validation --------------------->
<input type="checkbox" class="checkbox"><span class="check_text">I agree to the terms & conditions</span>
<button type="submit" id="submit_btn" class="submit_btn">Register</button>
</form>
<!--------------- End Register Form --------------------->
</div>
<!--------------- Success & Error Popup --------------------->
<div class="popup" id="Valpopup">
<i class="fa-sharp fa-solid fa-check valicon"></i>
<h2>Register Successfully!</h2>
<button class="ok_btn" type="button" onclick="closevalPopup()">OK</button>
</div>
<div class="popup" id="errorpopup">
<i class="fa-solid fa-xmark erroricon"></i>
<h2>Something Wrong</h2>
<button class="ok_btn" type="button" onclick="closeerrorPopup()">OK</button>
</div>
<!--------------- End Success & Error Popup --------------------->
</div>
<!--------------- SCRIPT --------------------->
<script src="script.js"></script>
</body>
</html>