xxxxxxxxxx1
<form class="row g-3 needs-validation m-5" novalidate>2
<div class="col-md-4">3
<div class="form-outline">4
<input type="text" class="form-control" id="validationCustom01" value="Mark" required />5
<label for="validationCustom01" class="form-label">First name</label>6
<div class="valid-feedback">Looks good!</div>7
</div>8
</div>9
<div class="col-md-4">10
<div class="form-outline">11
<input type="text" class="form-control" id="validationCustom02" value="Otto" required />12
<label for="validationCustom02" class="form-label">Last name</label>13
<div class="valid-feedback">Looks good!</div>14
</div>15
</div>16
<div class="col-md-4">17
<div class="input-group form-outline">18
<span class="input-group-text" id="inputGroupPrepend">@</span>19
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required />20
<label for="validationCustomUsername" class="form-label">Username</label>21
<div class="invalid-feedback">Please choose a username.</div>22
</div>23
</div>24
<div class="col-md-6">25
<div class="form-outline">26
<input type="text" class="form-control" id="validationCustom03" required />27
<label for="validationCustom03" class="form-label">City</label>28
<div class="invalid-feedback">Please provide a valid city.</div>29
</div>30
</div>31
<div class="col-md-6">32
<div class="form-outline">33
<input type="text" class="form-control" id="validationCustom05" required />34
<label for="validationCustom05" class="form-label">Zip</label>35
<div class="invalid-feedback">Please provide a valid zip.</div>36
</div>37
</div>38
<div class="col-12">39
<div class="form-check">40
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required />41
<label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>42
<div class="invalid-feedback">You must agree before submitting.</div>43
</div>44
</div>45
<div class="col-12">46
<button class="btn btn-primary" type="submit">Submit form</button>47
</div>48
</form>xxxxxxxxxx1
.form-control.is-valid, .was-validated .form-control:valid {2
border-color: blue !important;3
}4
5
.valid-feedback {6
color: blue !important;7
}8
9
.form-outline .form-control.is-valid~.form-label, .was-validated .form-outline .form-control:valid~.form-label {10
color: blue !important;11
}12
13
.form-outline .form-control.is-valid~.form-notch .form-notch-leading, .form-outline .form-control.is-valid~.form-notch .form-notch-middle, .form-outline .form-control.is-valid~.form-notch .form-notch-trailing, .was-validated .form-outline .form-control:valid~.form-notch .form-notch-leading, .was-validated .form-outline .form-control:valid~.form-notch .form-notch-middle, .was-validated .form-outline .form-control:valid~.form-notch .form-notch-trailing {14
border-color: blue ;15
}16
17
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {18
border-color: blue !important;19
box-shadow: 0 0 0 .25rem rgba(0,0,255,.25) !important;;20
}xxxxxxxxxx1
// Example starter JavaScript for disabling form submissions if there are invalid fields2
(() => {3
'use strict';4
5
// Fetch all the forms we want to apply custom Bootstrap validation styles to6
const forms = document.querySelectorAll('.needs-validation');7
8
// Loop over them and prevent submission9
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