Bootstrap5 Validation Custom styles are used to add custom styles of bootstrap5 in your code. In order to add such custom styles we will have to add a novalidate boolean attribute to our <form>. After applying this attribute when you attempt to submit the form you can see the valid and invalid style of custom styles. Using custom styles we can add a variety of styles such as colors, borders, background icons, etc. If we want to add background icons then we can use <select>, they are only available with .form-select.
Bootstrap 5 Validation Custom styles attribute:
- novalidate: This attribute is used to disable the browser’s default feedback tooltips.
Syntax:
<form class="..." novalidate>
...
</form>Example 1: let’s see an example of validation custom styles.
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href=
</head>
<body class="m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap5 Validation Custom styles</h3>
<form class="needs-validation" novalidate>
<div>
<label class="form-label">
Name
</label>
<input type="text" required>
<section class="valid-feedback">
Done
</section>
</div>
<br>
<div>
<label>Role</label>
<input type="text" required>
<section class="valid-feedback">
Done
</section>
</div>
<br>
<div>
<label>Email</label>
<input type="email" required>
<section class="invalid-feedback">
Please Enter email
</section>
</div>
<br>
<section>
<button class="btn btn-primary" type="submit">
submit
</button>
</section>
</form>
<script>
// Example starter JavaScript for disabling form
// submissions if there are invalid fields
(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>
|
Output:
Example 2: let’s see another example of validation custom styles.
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href=
</head>
<body class="m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap5 Validation Custom styles</h3>
<form class="needs-validation" novalidate>
<div>
<label class="form-label">Name</label>
<input type="text" required>
<section class="valid-feedback">
Done
</section>
</div>
<br>
<div>
<label>City</label>
<input type="text" required>
<section class="invalid-feedback">
Please enter your city name
</section>
</div>
<br>
<div>
<label>Password</label>
<input type="password" required>
<section class="invalid-feedback">
Please Enter your password
</section>
</div>
<br>
<div>
Are you eligible?:
<input type="checkbox" required>
<section class="valid-feedback">
Done
</section>
</div>
<br>
<div>
Gender: Male <input type="radio" name="myGender">
Female <input type="radio" name="myGender">
Other <input type="radio" name="myGender" required>
<section class="valid-feedback">
Done
</section>
</div>
<section>
<button class="btn btn-primary" type="submit">
submit
</button>
</section>
</form>
<script>
// Example starter JavaScript for disabling form
// submissions if there are invalid fields
(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>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/validation/#custom-styles