xxxxxxxxxx1
<form class="row g-3 needs-validation" novalidate>2
<div class="col-md-4">3
<div class="form-outline">4
<input5
type="text"6
class="form-control"7
id="validationCustom01"8
value="Mark"9
required10
/>11
<label for="validationCustom01" class="form-label">First name</label>12
<div class="valid-feedback">Looks good!</div>13
</div>14
</div>15
<div class="col-md-4">16
<div class="form-outline">17
<input18
type="text"19
class="form-control"20
id="validationCustom02"21
value="Otto"22
required23
/>24
<label for="validationCustom02" class="form-label">Last name</label>25
<div class="valid-feedback">Looks good!</div>26
</div>27
</div>28
<div class="col-md-4">29
<div class="input-group form-outline">30
<span class="input-group-text" id="inputGroupPrepend">@</span>31
<input32
type="text"33
class="form-control"34
id="validationCustomUsername"35
aria-describedby="inputGroupPrepend"36
required37
/>38
<label for="validationCustomUsername" class="form-label">Username</label>39
<div class="invalid-feedback">Please choose a username.</div>40
</div>41
</div>42
<div class="col-md-6">43
<div class="form-outline">44
<input type="text" class="form-control" id="validationCustom03" required />45
<label for="validationCustom03" class="form-label">City</label>46
<div class="invalid-feedback">Please provide a valid city.</div>47
</div>48
</div>49
<div class="col-md-6">50
<div class="form-outline">51
<input type="text" class="form-control" id="validationCustom05" required />52
<label for="validationCustom05" class="form-label">Zip</label>53
<div class="invalid-feedback">Please provide a valid zip.</div>54
</div>55
</div>56
<div class="col-12">57
<div class="form-check">58
<input59
class="form-check-input"60
type="checkbox"61
value=""62
id="invalidCheck"63
required64
/>65
<label class="form-check-label" for="invalidCheck">66
Agree to terms and conditions67
</label>68
<div class="invalid-feedback">You must agree before submitting.</div>69
</div>70
</div>71
<select72
class="select"73
id="basic-select"74
data-mdb-validation="true"75
data-mdb-valid-feedback="This value is valid"76
data-mdb-invalid-feedback="This value is invalid"77
data-mdb-clear-button="true"78
>79
<option value="1">One</option>80
<option value="2">Two</option>81
<option value="3">Three</option>82
<option value="4">Four</option>83
<option value="5">Five</option>84
<option value="6">Six</option>85
<option value="7">Seven</option>86
<option value="8">Eight</option>87
</select>88
<div class="col-12">89
<button class="btn btn-primary" type="submit">Submit form</button>90
</div>91
</form>92
<button id="reset" class="btn btn-primary" type="button">reset</button>93
1
1
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
const selectInput = document.querySelector('.select-input');16
17
if (selectInput.value !== 'Two') {18
selectInput.setCustomValidity("invalid");19
} else {20
selectInput.setCustomValidity("");21
}22
}23
form.classList.add('was-validated');24
}, false);25
});26
const resetBtn = document.querySelector('#reset');27
resetBtn.addEventListener('click', () => {28
Array.prototype.slice.call(forms).forEach((form) => {29
form.reset()30
form.classList.remove("was-validated");31
});32
})33
34
})(); Console errors: 0