Skip to content

Commit 47c0e2a

Browse files
corespidercorespider
committed
Initial commit
0 parents  commit 47c0e2a

File tree

6 files changed

+297
-0
lines changed

6 files changed

+297
-0
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# javascriptvalidation
2+
3+
[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/javascriptvalidation)

‎index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<html>
2+
3+
<head>
4+
<link rel="stylesheet" media="all" href="/style.css" />
5+
<link rel="stylesheet" media="all"
6+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
7+
<script src="/validation.js" async defer crossorigin="anonymous"></script>
8+
</head>
9+
10+
<body>
11+
<div class="container">
12+
<div class="header">
13+
<h2>Javascript Validation Form</h2>
14+
</div>
15+
<form id="form" class="form">
16+
<div class="form-control">
17+
<input type="text" placeholder="username" id="username" />
18+
<i class="fas fa-check-circle"></i>
19+
<i class="fas fa-exclamation-circle"></i>
20+
<small>Error message</small>
21+
</div>
22+
<div class="form-control">
23+
<input type="email" placeholder="Email" id="email" />
24+
<i class="fas fa-check-circle"></i>
25+
<i class="fas fa-exclamation-circle"></i>
26+
<small>Error message</small>
27+
</div>
28+
<div class="form-control">
29+
<input type="password" placeholder="Password" id="password" />
30+
<i class="fas fa-check-circle"></i>
31+
<i class="fas fa-exclamation-circle"></i>
32+
<small>Error message</small>
33+
</div>
34+
<div class="form-control">
35+
<input type="password" placeholder="Confirm Password" id="cnfpassword" />
36+
<i class="fas fa-check-circle"></i>
37+
<i class="fas fa-exclamation-circle"></i>
38+
<small>Error message</small>
39+
</div>
40+
<button>Submit</button>
41+
</form>
42+
</div>
43+
</body>
44+
45+
</html>

‎index.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Import stylesheets
2+
import './style.css';
3+
4+
const form = document.getElementById('form');
5+
const username = document.getElementById('username');
6+
const email = document.getElementById('email');
7+
const password = document.getElementById('password');
8+
const cnfpassword = document.getElementById('cnfpassword');
9+
10+
form.addEventListener('submit', e => {
11+
e.preventDefault();
12+
13+
checkInputs();
14+
});
15+
16+
function checkInputs() {
17+
// trim to remove the whitespaces
18+
const usernameValue = username.value.trim();
19+
const emailValue = email.value.trim();
20+
const passwordValue = password.value.trim();
21+
const cnfpasswordValue = cnfpassword.value.trim();
22+
23+
if (usernameValue === '') {
24+
setErrorFor(username, 'Username cannot be blank');
25+
} else {
26+
setSuccessFor(username);
27+
}
28+
29+
if (emailValue === '') {
30+
setErrorFor(email, 'Email cannot be blank');
31+
} else if (!isEmail(emailValue)) {
32+
setErrorFor(email, 'Not a valid email');
33+
} else {
34+
setSuccessFor(email);
35+
}
36+
37+
if (passwordValue === '') {
38+
setErrorFor(password, 'Password cannot be blank');
39+
} else {
40+
setSuccessFor(password);
41+
}
42+
43+
if (cnfpasswordValue === '') {
44+
setErrorFor(cnfpassword, 'Confirm Password cannot be blank');
45+
} else if (passwordValue !== cnfpasswordValue) {
46+
setErrorFor(cnfpassword, 'Passwords does not match');
47+
} else {
48+
setSuccessFor(cnfpassword);
49+
}
50+
}
51+
52+
function setErrorFor(input, message) {
53+
const formControl = input.parentElement;
54+
const small = formControl.querySelector('small');
55+
formControl.className = 'form-control error';
56+
small.innerText = message;
57+
}
58+
59+
function setSuccessFor(input) {
60+
const formControl = input.parentElement;
61+
formControl.className = 'form-control success';
62+
}
63+
64+
function isEmail(email) {
65+
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(
66+
email
67+
);
68+
}

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "js",
3+
"version": "0.0.0",
4+
"private": true,
5+
"dependencies": {}
6+
}

‎style.css

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');
3+
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background-color: #151326;
10+
font-family: 'Open Sans', sans-serif;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
min-height: 100vh;
15+
margin: 0;
16+
}
17+
18+
.container {
19+
background-color: #fff;
20+
border-radius: 5px;
21+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
22+
overflow: hidden;
23+
width: 400px;
24+
max-width: 100%;
25+
}
26+
27+
.header {
28+
border-bottom: 1px solid #f0f0f0;
29+
background-color: #f7f7f7;
30+
padding: 20px 40px;
31+
}
32+
33+
.header h2 {
34+
margin: 0;
35+
}
36+
37+
.form {
38+
padding: 30px 40px;
39+
}
40+
41+
.form-control {
42+
margin-bottom: 10px;
43+
padding-bottom: 20px;
44+
position: relative;
45+
}
46+
47+
.form-control label {
48+
display: inline-block;
49+
margin-bottom: 5px;
50+
}
51+
52+
.form-control input {
53+
border: 2px solid #f0f0f0;
54+
border-radius: 4px;
55+
display: block;
56+
font-family: inherit;
57+
font-size: 14px;
58+
padding: 10px;
59+
width: 100%;
60+
}
61+
62+
.form-control input:focus {
63+
outline: 0;
64+
border-color: #777;
65+
}
66+
67+
.form-control.success input {
68+
border-color: #2ecc71;
69+
}
70+
71+
.form-control.error input {
72+
border-color: #e74c3c;
73+
}
74+
75+
.form-control i {
76+
visibility: hidden;
77+
position: absolute;
78+
top: 13px;
79+
right: 10px;
80+
}
81+
82+
.form-control.success i.fa-check-circle {
83+
color: #2ecc71;
84+
visibility: visible;
85+
}
86+
87+
.form-control.error i.fa-exclamation-circle {
88+
color: #e74c3c;
89+
visibility: visible;
90+
}
91+
92+
.form-control small {
93+
color: #e74c3c;
94+
position: absolute;
95+
bottom: 0;
96+
left: 0;
97+
visibility: hidden;
98+
}
99+
100+
.form-control.error small {
101+
visibility: visible;
102+
}
103+
104+
.form button {
105+
background-color: #225080;
106+
border: 2px solid #225080;
107+
border-radius: 4px;
108+
color: #fff;
109+
display: block;
110+
font-family: inherit;
111+
font-size: 16px;
112+
padding: 10px;
113+
margin-top: 20px;
114+
width: 100%;
115+
cursor: pointer;
116+
}
117+
118+
.floating-btn {
119+
border-radius: 26.5px;
120+
background-color: #001f61;
121+
border: 1px solid #001f61;
122+
box-shadow: 0 16px 22px -17px #03153b;
123+
color: #fff;
124+
cursor: pointer;
125+
font-size: 16px;
126+
line-height: 20px;
127+
padding: 12px 20px;
128+
position: fixed;
129+
bottom: 20px;
130+
right: 20px;
131+
z-index: 999;
132+
}
133+
134+
.floating-btn:hover {
135+
background-color: #ffffff;
136+
color: #001f61;
137+
}
138+
139+
.floating-btn:focus {
140+
outline: none;
141+
}
142+
143+
.floating-text {
144+
background-color: #001f61;
145+
border-radius: 10px 10px 0 0;
146+
color: #fff;
147+
font-family: 'Muli';
148+
padding: 7px 15px;
149+
position: fixed;
150+
bottom: 0;
151+
left: 50%;
152+
transform: translateX(-50%);
153+
text-align: center;
154+
z-index: 998;
155+
}
156+
157+
.floating-text a {
158+
color: #ff7500;
159+
text-decoration: none;
160+
}
161+
162+
@media screen and (max-width: 480px) {
163+
.social-panel-container.visible {
164+
transform: translateX(0px);
165+
}
166+
167+
.floating-btn {
168+
right: 10px;
169+
}
170+
}

‎tsconfig.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext"
4+
}
5+
}

0 commit comments

Comments
 (0)