xxxxxxxxxx1
<div class="container my-5">2
<div class="card px-3" style="width: 22rem">3
<div class="card-body">4
<h5 class="card-title">Card title</h5>5
<form class="row g-3 needs-validation" novalidate>6
<div class="col-12 mt-5">7
<div class="form-outline">8
<input type="text" id="form1" class="form-control" required />9
<label class="form-label" for="form1">Example label</label>10
<div class="valid-feedback">11
Looks good!12
</div>13
<div class="invalid-feedback">14
Please correct!15
</div>16
</div>17
</div>18
<div class="col-12">19
<div class="form-outline">20
<input type="text" id="form2" class="form-control" required />21
<label class="form-label" for="form2">Example label</label>22
<div class="valid-feedback">23
Looks good!24
</div>25
<div class="invalid-feedback">26
Please correct!27
</div>28
</div>29
</div>30
<div class="col-12">31
<div class="form-outline">32
<input type="text" id="form3" class="form-control" required />33
<label class="form-label" for="form3">Example label</label>34
<div class="valid-feedback">35
Looks good!36
</div>37
<div class="invalid-feedback">38
Please correct!39
</div>40
</div>41
</div>42
<button type="submit" class="btn btn-primary mt-5">Submit</button>43
</form>44
</div>45
</div>46
</div>1
1
xxxxxxxxxx1
// Example starter JavaScript for disabling form submissions if there are invalid fields2
(function () {3
'use strict';4
5
// Fetch all the forms we want to apply custom Bootstrap validation styles to6
var forms = document.querySelectorAll('.needs-validation');7
8
// Loop over them and prevent submission9
Array.prototype.slice.call(forms).forEach(function (form) {10
form.addEventListener(11
'submit',12
function (event) {13
if (!form.checkValidity()) {14
event.preventDefault();15
event.stopPropagation();16
}17
18
form.classList.add('was-validated');19
},20
false21
);22
});23
})(); Console errors: 0