Bootstrap 5 Validation Server side provides valuable, actionable feedback to your users by browser default behaviors or custom styles and JavaScript. If you are using server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid and add .invalid-feedback & .valid-feedback with these classes it is a supported class.
Bootstrap 5 Validation server-side classes:
- is-valid: This class is used to create a valid color input field.
- is-invalid: This class is used to create an invalid color input field.
- invalid-feedback: This class is used to give invalid color text feedback.
- valid-feedback: This class is used to give valid color text feedback.
Syntax:
<section>
<input type=" " class="Validation server-side Class"required>
<section class="Validation server-side Class">
.........
</section>
</section>
Example 1: In this example we will create two input fields with two feedback sections and all of them will be set as invalid.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body class= "m-3">
<h1 class="text-success"> GeeksforGeeks </h1>
<h3>Bootstrap5 Validation Server side</h3>
<form class="row g-3">
<section class="col-md-4">
<label>First name</label>
<input type="text"
class="form-control is-valid">
<section class="invalid-feedback">
Please enter your first name
</section>
</section>
<section class="col-md-4">
<label>Last name</label>
<input type="text"
class="form-control is-invalid">
<section class="invalid-feedback">
Please enter your last name
</section>
</section>
<section class="col-12">
<button class="btn btn-primary"
type="submit">
Submit form
</button>
</section>
</form>
</body>
</html>
Output:
Example 2: In this example we will put one input field, which will be valid and others will be invalid
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body class="m-3">
<h1 class="text-success"> GeeksforGeeks </h1>
<h3>Bootstrap5 Validation Server side</h3>
<form class="row g-3">
<section class="col-md-4">
<label>First name</label>
<input type="text" class="form-control is-valid" value="Geek">
<section class="valid-feedback">
Please enter your first name
</section>
</section>
<section class="col-md-4">
<label>Last name</label>
<input type="text" class="form-control is-invalid">
<section class="invalid-feedback">
Please enter your last name
</section>
</section>
<section class="col-md-4">
<label>Username</label>
<section class="input-group has-validation">
<span class="input-group-text">@</span>
<input type="text" class="form-control is-invalid">
<section class="invalid-feedback">
Enter your username.
</section>
</section>
</section>
<section class="col-md-4">
<label>City</label>
<input type="text" class="form-control is-invalid">
<section class="invalid-feedback">
Please enter your City name
</section>
</section>
<section class="col-md-3">
<label>State</label>
<select class="form-select is-invalid">
<option selected disabled value="">Choose</option>
<option>bihar</option>
<option>U.P.</option>
<option>C.G.</option>
</select>
<section class="invalid-feedback">
select a valid state.
</section>
</section>
<section class="col-12">
<section class="form-check">
<input class="form-check-input is-invalid"
type="checkbox"
value=""
id="name6"
required>
<label class="form-check-label">
Agree to terms and conditions
</label>
<section class="invalid-feedback">
You must agree before submitting.
</section>
</section>
</section>
<section class="col-12">
<button class="btn btn-primary" type="submit">
Submit form
</button>
</section>
</form>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/validation/#server-side