<!DOCTYPE html>
<
html
>
<
head
>
<
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
>