<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>Bootstrap5 Validation Sass</
title
>
<
link
rel
=
"stylesheet"
href
=
"./custom.css"
/>
<
style
>
.is-valid~.invalid-feedback {
display: none;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
form
class
=
"was-validated custom-validation"
>
<
h1
style
=
"color: rgb(11, 156, 11)"
>
GeeksforGeeks
</
h1
>
<
div
class
=
"row mb-3"
>
<
div
class
=
"col-md-6"
>
<
label
for
=
"firstNameInput"
class
=
"form-label"
>
First Name
</
label
>
<
input
type
=
"text"
class
=
"form-control is-invalid"
id
=
"firstNameInput"
required />
<
div
class
=
"invalid-feedback"
>
Please enter your first name.
</
div
>
<
div
class
=
"valid-feedback"
>
Looks good!
</
div
>
</
div
>
<
div
class
=
"col-md-6"
>
<
label
for
=
"lastNameInput"
class
=
"form-label"
>
Last Name
</
label
>
<
input
type
=
"text"
class
=
"form-control is-invalid"
id
=
"lastNameInput"
required />
<
div
class
=
"invalid-feedback"
>
Please enter your last name.
</
div
>
<
div
class
=
"valid-feedback"
>
Looks good!
</
div
>
</
div
>
</
div
>
<
div
class
=
"row mb-3"
>
<
div
class
=
"col-md-6"
>
<
label
for
=
"emailInput"
class
=
"form-label"
>
Email
</
label
>
<
input
type
=
"email"
class
=
"form-control is-invalid"
id
=
"emailInput"
required />
<
div
class
=
"invalid-feedback"
>
Please enter a valid email
address.
</
div
>
<
div
class
=
"valid-feedback"
>
Looks good!
</
div
>
</
div
>
<
div
class
=
"col-md-6"
>
<
label
for
=
"phoneInput"
class
=
"form-label"
>
Phone
</
label
>
<
input
type
=
"tel"
class
=
"form-control is-invalid"
id
=
"phoneInput"
required />
<
div
class
=
"invalid-feedback"
>
Please enter a valid phone
number.
</
div
>
<
div
class
=
"valid-feedback"
>
Looks good!
</
div
>
</
div
>
</
div
>
<
div
class
=
"mb-3"
>
<
label
for
=
"addressInput"
class
=
"form-label"
>
Address
</
label
>
<
textarea
class
=
"form-control"
id
=
"addressInput"
required></
textarea
>
<
div
class
=
"invalid-feedback"
>
Please enter your address.
</
div
>
<
div
class
=
"valid-feedback"
>
Looks good!
</
div
>
</
div
>
<
div
class
=
"mb-3"
>
<
div
class
=
"form-check"
>
<
input
class
=
"form-check-input"
type
=
"checkbox"
id
=
"agreeCheck"
required />
<
label
class
=
"form-check-label"
for
=
"agreeCheck"
>
I agree to the terms and
conditions.
</
label
>
<
div
class
=
"invalid-feedback"
>
Please agree to the terms and
conditions.
</
div
>
<
div
class
=
"valid-feedback"
>
Looks good!
</
div
>
</
div
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-primary"
>
Register
</
button
>
</
form
>
</
div
>
</
body
>
</
html
>