Skip to content

Commit 2c21670

Browse files
i-saifuli-saiful
committed
first commit
0 parents  commit 2c21670

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

‎index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Validation App Using JavaScript</title>
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
10+
</head>
11+
<body>
12+
<div class="bg-light p-3 text-center">
13+
<div class="h4 font-weight-bolder">Making An Expression Validation App Using JavaScript</div>
14+
</div>
15+
<div class="container mt-5">
16+
<!-- start form -->
17+
<form>
18+
<div class="form-row my-2">
19+
<div class="col my-2">
20+
<select id="type" class="custom-select">
21+
<option selected disabled value="null">Choose...</option>
22+
<option value="email" class="email">E-mail</option>
23+
<option value="phoneNumber" class="php">Phone Number</option>
24+
<option value="postCode" class="">Post Code</option>
25+
</select>
26+
<div class="invalid-feedback">Please select one option</div>
27+
</div>
28+
<div class="col-sm-6 my-2">
29+
<input type="text" id="user-input" class="form-control" placeholder="Input here">
30+
<div class="invalid-feedback">Please provide a valid input</div>
31+
</div>
32+
<div class="col my-2">
33+
<button type="submit" class="btn btn-primary">Check Validation</button>
34+
</div>
35+
</div>
36+
</form>
37+
<!-- end form here -->
38+
</div>
39+
40+
<!-- start result table -->
41+
<div class="container mt-5">
42+
<table class="table table-hover">
43+
<caption>List of Validation</caption>
44+
<thead class="thead-primary">
45+
<tr>
46+
<th scope="col">Type</th>
47+
<th scope="col">Input</th>
48+
<th scope="col">Status</th>
49+
</tr>
50+
</thead>
51+
<tbody id="result-list">
52+
</tbody>
53+
</table>
54+
</div>
55+
<!-- end result table -->
56+
57+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
58+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
59+
<script src="js/script.js"></script>
60+
</body>
61+
</html>

‎js/script.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Define UI Element
2+
const type = document.getElementById('type');
3+
const userInput = document.getElementById('user-input');
4+
const form = document.querySelector('form');
5+
const resultList = document.getElementById('result-list')
6+
7+
// Add EventListener
8+
form.addEventListener('submit', handleSubmit);
9+
type.addEventListener('change', errorShow);
10+
userInput.addEventListener('focus', removeAlertInput)
11+
12+
function handleSubmit(e) {
13+
e.preventDefault();
14+
if(type.value !== 'null' && userInput.value) {
15+
// create element table row
16+
const tr = document.createElement('tr');
17+
18+
let regex = /^\d{4}$/
19+
let found = null
20+
// check input
21+
switch(type.value) {
22+
case 'email':
23+
regex = /^[\w-\.]+[\w]@([\w-]+\.)+[\w-]{2,4}$/
24+
found = userInput.value.match(regex);
25+
if (found) {
26+
tr.innerHTML = `
27+
<td>E-mail</td>
28+
<td>${userInput.value}</td>
29+
<td><span class="alert-success py-2 px-3 rounded">Valid</span></td>
30+
`
31+
} else {
32+
tr.innerHTML = `
33+
<td>E-mail</td>
34+
<td>${userInput.value}</td>
35+
<td><span class="alert-danger py-2 px-3 rounded">Invalid</span></td>
36+
`
37+
}
38+
break
39+
case 'phoneNumber':
40+
regex = /^(\+(?=88))?(88)?01\d{9}$/
41+
found = userInput.value.match(regex);
42+
if (found) {
43+
tr.innerHTML = `
44+
<td>Phone Number</td>
45+
<td>${userInput.value}</td>
46+
<td><span class="alert-success py-2 px-3 rounded">Valid</span></td>
47+
`
48+
} else {
49+
tr.innerHTML = `
50+
<td>Phone Number</td>
51+
<td>${userInput.value}</td>
52+
<td><span class="alert-danger py-2 px-3 rounded">Invalid</span></td>
53+
`
54+
}
55+
break
56+
case 'postCode':
57+
regex = /^\d{4}$/
58+
found = userInput.value.match(regex);
59+
if(found) {
60+
tr.innerHTML = `
61+
<td>Post Code</td>
62+
<td>${userInput.value}</td>
63+
<td><span class="alert-success py-2 px-3 rounded">Valid</span></td>
64+
`
65+
} else {
66+
tr.innerHTML = `
67+
<td>Post Code</td>
68+
<td>${userInput.value}</td>
69+
<td><span class="alert-danger py-2 px-3 rounded">Invalid</span></td>
70+
`
71+
}
72+
break
73+
}
74+
firstChild = resultList.firstElementChild
75+
resultList.insertBefore(tr, firstChild)
76+
userInput.value = ''
77+
} else if(!userInput.value) {
78+
userInput.classList.add('is-invalid');
79+
} else {
80+
type.classList.add('is-invalid');
81+
userInput.value = ''
82+
}
83+
}
84+
85+
function errorShow() {
86+
type.classList.remove('is-invalid')
87+
}
88+
89+
function removeAlertInput() {
90+
userInput.classList.remove('is-invalid')
91+
}

0 commit comments

Comments
 (0)