Skip to content

Commit 0a0ed34

Browse files
coderzamancoderzaman
committed
Expression validation App
1 parent 67cd7db commit 0a0ed34

File tree

3 files changed

+206
-0
lines changed

3 files changed

+206
-0
lines changed

‎25. Expression Validation/img/image.png

357 KB
Loading

‎25. Expression Validation/index.html

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Expression Validation</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" rel="stylesheet">
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
12+
<style>
13+
body {
14+
font-family: "Caveat", cursive;
15+
}
16+
17+
.btn_close {
18+
width: 100%;
19+
border-radius: 0;
20+
position: absolute;
21+
bottom: 0;
22+
height: 50px;
23+
24+
}
25+
26+
.del_btn {
27+
float: right;
28+
border-radius: 0;
29+
height: 30px;
30+
font-size: 16;
31+
padding: 0 10px;
32+
33+
}
34+
35+
.sucess,
36+
.error {
37+
color: white;
38+
padding: 5px;
39+
margin: 5px 0px 15px 0px;
40+
}
41+
42+
.sucess {
43+
background: green;
44+
}
45+
46+
.error {
47+
background: red;
48+
}
49+
50+
.bghead {
51+
border-radius: 0 0 30px 30px;
52+
background-color: rgb(239, 237, 255);
53+
border: 1px solid rgb(221, 221, 221);
54+
}
55+
56+
.bgbody {
57+
border-radius: 30px 30px 30px 30px;
58+
background-color: rgb(246, 244, 255);
59+
border: 1px solid rgb(221, 221, 221);
60+
}
61+
62+
.showOuput {
63+
border-radius: 30px 30px 30px 30px;
64+
background-color: rgb(239, 237, 255);
65+
border: 1px solid rgb(221, 221, 221);
66+
}
67+
68+
.valid {
69+
background-color: green;
70+
}
71+
72+
.notValid {
73+
background-color: rgb(255, 66, 66);
74+
}
75+
</style>
76+
</head>
77+
78+
79+
80+
81+
<body>
82+
<div class="container ">
83+
<div class="row">
84+
<div class="col-12 cart-head-left py-3 bghead shadow">
85+
<h4 class="fs-1 fw-bold text-center">Expression Validation</h4>
86+
</div>
87+
</div>
88+
</div>
89+
90+
<div class="container my-2 cart-head-left py-3 bgbody shadow">
91+
<div class="row">
92+
<div class="col-12 m-auto">
93+
<h3 class="text-center">Check Your Credential Valid or Not</h3>
94+
<p class="text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio iste modi
95+
dicta dolor enim</p>
96+
</div>
97+
</div>
98+
<div class="row ">
99+
<div class="col-8 m-auto">
100+
<label for="sel-option" class="mb-1">Select Your Option</label>
101+
<select class="form-control" id="sel-option">
102+
<option value="email">Email</option>
103+
<option value="postalCode">Postal Code</option>
104+
<option value="phoneNumber">Phone Number</option>
105+
<option value="password">Password</option>
106+
<option value="name">Name</option>
107+
<option value="userName">User Name</option>
108+
</select>
109+
<label for="user-input" class="mt-3 mb-1">Enter Your Input</label>
110+
<label for="user-input" id="requiredField" style="float: right; font-size: 14px; font-weight: bold; display: none;" class="mt-3 mb-1 text-danger">* Filled Required</label>
111+
<input id="user-input" class="form-control" type="text">
112+
</div>
113+
</div>
114+
<div class="row">
115+
<div class="col-12 text-center mt-3">
116+
<button class="btn btn-dark" id="check-btn">Check </button>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<div class="container ">
122+
<div class="row" id="show-message">
123+
124+
</div>
125+
</div>
126+
</div>
127+
128+
129+
130+
131+
132+
133+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
134+
<script src="js/script.js"></script>
135+
<p></p>
136+
</body>
137+
138+
</html>

‎25. Expression Validation/js/script.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
class UI {
2+
static ShowMessage(message, className) {
3+
showMessage.innerHTML = `
4+
<div class="col-12 py-3 showOuput shadow ${className}">
5+
<h4 class="fs-1 fw-bold text-center text-white">${message}</h4>
6+
</div>`
7+
}
8+
9+
static showRequired(){
10+
showMessage.innerHTML ='';
11+
requiredField.style.display = "block";
12+
userInputField.style.border = "1px solid red";
13+
14+
setTimeout(function() {
15+
requiredField.style.display = "none";
16+
userInputField.style.border = "1px solid #dee2e6";
17+
},2000)
18+
}
19+
}
20+
21+
22+
// Get Btn and Field
23+
const userOptionField = document.querySelector('#sel-option');
24+
const userInputField = document.querySelector('#user-input');
25+
const validateBtn = document.querySelector('#check-btn');
26+
const showMessage = document.querySelector('#show-message');
27+
const requiredField = document.querySelector('#requiredField');
28+
29+
// RegEx
30+
const phoneNumberRegEx = /^(\+)?(88)?01[0-9]{9}$/;
31+
const emailRegEx = /^([a-zA-Z0-9]\.?)+[^\.]@([a-zA-Z0-9]\.?)+[^\.]$/;
32+
const postalCodeRegEx = /^[0-9]{4}$/;
33+
const passwordRegEx = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[\W_])[^\s]{6,}$/;
34+
const userNameRegEx = /^[a-zA-Z][a-zA-Z0-9._]{2,29}$/;
35+
const nameRegEx = /^[A-Z][a-zA-Z]+([ '-][A-Z][a-zA-Z]+)*$/;
36+
37+
// Event Listner
38+
validateBtn.addEventListener('click', checkValidation);
39+
40+
41+
//Function
42+
function checkValidation() {
43+
let userOption = userOptionField.value;
44+
let userInput = userInputField.value;
45+
46+
if (userInput == '') {
47+
UI.showRequired();
48+
} else {
49+
50+
if (userOption == "email" && emailRegEx.test(userInput)) {
51+
UI.ShowMessage("Valid", 'valid');
52+
} else if (userOption == "password" && passwordRegEx.test(userInput)) {
53+
UI.ShowMessage("Valid", 'valid');
54+
} else if (userOption == "phoneNumber" && phoneNumberRegEx.test(userInput)) {
55+
UI.ShowMessage("Valid", 'valid');
56+
} else if (userOption == "postalCode" && postalCodeRegEx.test(userInput)) {
57+
UI.ShowMessage("Valid", 'valid');
58+
} else if (userOption == "name" && nameRegEx.test(userInput)) {
59+
UI.ShowMessage("Valid", 'valid');
60+
} else if (userOption == "userName" && userNameRegEx.test(userInput)) {
61+
UI.ShowMessage("Valid", 'valid');
62+
}
63+
else {
64+
UI.ShowMessage("Not Valid", 'notValid')
65+
}
66+
}
67+
}
68+

0 commit comments

Comments
 (0)