<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
</
head
>
<
body
class
=
"mx-5 my-5"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h3
>Bootstrap5 Validation Tooltips</
h3
>
<
form
class
=
"row g-lg-3 needs-validation"
novalidate>
<
section
class
=
"col-3 position-relative"
>
<
label
class
=
"form-label"
>
First name
</
label
>
<
input
type
=
"text"
class
=
"form-control"
required>
<
section
class
=
"invalid-tooltip"
>
Enter first name
</
section
>
</
section
>
<
section
class
=
"col-3 position-relative"
>
<
label
class
=
"form-label"
>
Last name
</
label
>
<
input
type
=
"text"
class
=
"form-control"
required>
<
section
class
=
"invalid-tooltip"
>
Enter last name
</
section
>
</
section
>
<
section
class
=
"col-3 position-relative"
>
<
label
class
=
"form-label"
>
City
</
label
>
<
input
type
=
"text"
class
=
"form-control"
required>
<
section
class
=
"invalid-tooltip"
>
Enter your city
</
section
>
</
section
>
<
section
>
<
button
class
=
"btn btn-primary"
type
=
"submit"
>
Submit form
</
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
>