-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBS_Task_6.html
76 lines (70 loc) · 2.83 KB
/
BS_Task_6.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
<!DOCTYPE html>
<head>
<title>
Bootstrap Task 6
</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="mx-auto w-50 mt-5">
<form class="needs-validation" novalidate>
<div class="mb-3 has-validation">
<label for="inputName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputName" required>
<div class="invalid-feedback">
Name is required.
</div>
</div>
<div class="mb-3 has-validation">
<label for="inputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="inputEmail1" required>
<div class="invalid-feedback">
Email is required.
</div>
</div>
<div class="mb-3 has-validation">
<label for="inputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword1" required>
<div class="invalid-feedback">
Password is required.
</div>
</div>
<div class="mb-3">
<label for="inputHobbies" class="form-label">Hobbies</label>
<select class="form-select" aria-label="Default select example" id="inputHobbies" required>
<option selected disabled value="">--select--</option>
<option value="1">Reading</option>
<option value="2">Writing</option>
<option value="3">Coding</option>
<option value="4">Singing</option>
<option value="5">Dancing</option>
</select>
<div class="invalid-feedback">
Hobbies is required.
</div>
</div>
<div>
<button type="submit" class="btn btn-danger w-100">Submit</button>
</div>
</form>
</div>
<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
</body>
</html>