Bootstrap 5 Validation is supported by various elements present in the form and you can use it to make sure the user knows about which field is mandatory. The different elements in the form group which are supported are:
- <input>s and <textarea>s with .form-control
- <select>s with .form-select
- .form-checks
Bootstrap 5 Validation Supported elements syntax:
<input class="form-control" type="..."
id="..." required>
<div class="invalid-feedback">
...
</div>Bootstrap 5 Validation Supported elements used classes:
- invalid-feedback: This class is used to give feedback when the input is not valid or there is no input in red color.
Bootstrap 5 Validation Supported elements used attributes:
- required: This attribute is needed to be added with the input tag which makes the input element mandatory.
Example 1: The code below demonstrates how the validation can be applied on input fields and checks and switches:
HTML
<!doctype html><html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<title>Bootstrap 5 Validation Supported elements</title>
</head>
<body>
<h1 class="ms-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4 mb-2">
Bootstrap 5 Validation Supported elements
</h4>
<h5 class="m-4 text-success">
Fill in the Form:
</h5>
<div class="container m-2">
<form class="was-validated">
<div class="mb-3">
<label for="textInput" class="form-label">
Enter your name:
</label>
<input class="form-control" type="text"
id="textInput" required>
<div class="invalid-feedback">
Please enter valid name above.
</div>
</div>
<div class="row">
<p class="text-muted">
Choose the technologies you want to learn:
</p>
<div class="col-6">
<div class="form-check m-2">
<input class="form-check-input"
type="checkbox" id="defaultCheckbox1"
autocomplete="off" required>
<label class="form-check-label"
for="defaultCheckbox1">
Data Structures
</label>
<div class="invalid-feedback">
It is compulsory to check this.
</div>
</div>
</div>
<div class="col-6">
<div class="form-check m-2">
<input class="form-check-input"
type="checkbox" id="checkedCheckbox1"
autocomplete="off" checked required>
<label class="form-check-label"
for="checkedCheckbox1">
Algorithms</label>
<div class="invalid-feedback">
It is compulsory to check this.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-check form-switch m-2">
<input class="form-check-input"
type="checkbox" id="defaultCheckbox2"
autocomplete="off" required>
<label class="form-check-label"
for="defaultCheckbox2">
HTML
</label>
</div>
</div>
<div class="col-6">
<div class="form-check form-switch m-2">
<input class="form-check-input"
type="checkbox" id="checkedCheckbox2"
autocomplete="off" checked required>
<label class="form-check-label"
for="checkedCheckbox2">
CSS
</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Example 2: The code below demonstrates how the validation doesn’t work with disabled inputs:
HTML
<!doctype html><html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<title>Bootstrap 5 Validation Supported elements</title>
</head>
<body>
<h1 class="ms-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4 mb-2">
Bootstrap 5 Validation Supported elements
</h4>
<h5 class="m-4 text-success">
Fill in the Form:
</h5>
<div class="container m-2">
<form class="was-validated">
<div class="mb-3">
<label for="textInput" class="form-label">
Enter your name:
</label>
<input class="form-control" type="text"
id="textInput" required>
<div class="invalid-feedback">
Please enter valid name above.
</div>
</div>
<div class="mb-3">
<label for="emailInput" class="form-label">
Email address (This is Disabled):
</label>
<input type="email" class="form-control"
id="emailInput" placeholder="Disabled"
disabled required>
<div class="invalid-feedback">
Please enter an email above.
</div>
</div>
<div class="mb-3">
<label for="validTextarea"
class="form-label">
Textarea
</label>
<textarea class="form-control" id="validTextarea"
placeholder="Required example textarea"
required>
</textarea>
<div class="invalid-feedback">
Please enter some text in the textarea.
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/validation/#supported-elements