xxxxxxxxxx
1
<form class="row g-3 needs-validation" novalidate>
2
<div class="col-md-4">
3
<div class="form-outline">
4
<input
5
type="text"
6
class="form-control"
7
id="validationCustom01"
8
value="Mark"
9
required
10
/>
11
<label for="validationCustom01" class="form-label">First name</label>
12
</div>
13
</div>
14
<div class="col-md-4">
15
<div class="form-outline">
16
<input
17
type="text"
18
class="form-control"
19
id="validationCustom02"
20
value="Otto"
21
required
22
/>
23
<label for="validationCustom02" class="form-label">Last name</label>
24
</div>
25
</div>
26
<div class="col-md-4">
27
<div class="input-group form-outline">
28
<span class="input-group-text" id="inputGroupPrepend">@</span>
29
<input
30
type="text"
31
class="form-control"
32
id="validationCustomUsername"
33
aria-describedby="inputGroupPrepend"
34
required
35
/>
36
<label for="validationCustomUsername" class="form-label">Username</label>
37
</div>
38
</div>
39
<div class="col-md-6">
40
<div class="form-outline">
41
<input type="text" class="form-control" id="validationCustom03" required />
42
<label for="validationCustom03" class="form-label">City</label>
43
</div>
44
</div>
45
<div class="col-md-6">
46
<div class="form-outline">
47
<input type="text" class="form-control" id="validationCustom05" required />
48
<label for="validationCustom05" class="form-label">Zip</label>
49
</div>
50
</div>
51
<div class="col-12">
52
<div class="form-check">
53
<input
54
class="form-check-input"
55
type="checkbox"
56
value=""
57
id="invalidCheck"
58
required
59
/>
60
<label class="form-check-label" for="invalidCheck">
61
Agree to terms and conditions
62
</label>
63
</div>
64
</div>
65
<div class="col-12">
66
<button class="btn btn-primary" type="submit">Submit form</button>
67
</div>
68
</form>
xxxxxxxxxx
1
.form-control:valid {
2
margin-bottom: 0rem!important;
3
}
4
.form-control:invalid {
5
margin-bottom: 0rem!important;
6
}
xxxxxxxxxx
1
// Example starter JavaScript for disabling form submissions if there are invalid fields
2
(() => {
3
'use strict';
4
5
// Fetch all the forms we want to apply custom Bootstrap validation styles to
6
const forms = document.querySelectorAll('.needs-validation');
7
8
// Loop over them and prevent submission
9
Array.prototype.slice.call(forms).forEach((form) => {
10
form.addEventListener('submit', (event) => {
11
if (!form.checkValidity()) {
12
event.preventDefault();
13
event.stopPropagation();
14
}
15
form.classList.add('was-validated');
16
}, false);
17
});
18
})();
Console errors: 0