Bootstrap 5 Form Validation [5 Demos with Code]

Doing Form Validation in Bootstrap 5

Bootstrap 5 provides custom styles by using HTML 5 form validation. Besides, you may also provide feedback/tips to the users via browser default behaviors as well as JavaScript.

The form validation can be applied to input fields like textboxes, checkboxes, radio buttons, or select elements and textarea.

You may show descriptive messages and tooltips as well while validating forms as guiding users submitting the forms.

An example of BS 5 form validation with browser default style

Before creating a form validation with custom CSS and JavaScript, let us have a look at a form with browser’s default style.

So, the style depends on which browser you are using on which OS. A Windows OS form may look different than the form in Mac, Linux etc.

Have a look at the form below and we will describe how it is done:

See online demo and code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>BS 5 Form Validation</h3>

</div>

<label for="validationDefaultUsername" class="form-label">Username</label>

</div>

<button class="btn btn-success" type="submit">Submit form</button>

</div>

</form>

</div>

</body>

</html>

In order to make a form field mandatory, you need to add the required attribute.

An example of browser default form with more form fields

In this example, we have a select control and a checkbox to be validated. These are given the required attribute as well:

See online demo and code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>BS 5 Form Validation</h3>

</div>

<label for="validationDefaultUsername" class="form-label">Username</label>

</div>

</div>

<label for="validationDefault04" class="form-label">State</label>

<option selected disabled value="">Choose...</option>

</select>

</div>

Agree to terms and conditions

</label>

</div>

<button class="btn btn-success" type="submit">Submit form</button>

</div>

</form>

</div>

</body>

</html>

An example of custom CSS and JavaScript based form validation using BS 5

In order to use the custom styles in Bootstrap 5, you need to do two things:

In the <form>, you need to add the novalidate This is a Boolean attribute that will supress default feedback tooltips of the browser.
Use the :invalid and :valid styles (provided by BS 5 and applies automatically or you may customize this as well)

See an example below with various form controls and submit the form. You will see a custom style form validation in action:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>BS 5 Floating Labels</h3>

Looks good!

</div>

<label for="validationCustomUsername" class="form-label">Username</label>

What User Name World You Like?

</div>

Please Enter Your City Name?

</div>

<label for="validationCustom04" class="form-label">State</label>

<option selected disabled value="">Choose...</option>

</select>

Select Your State?

</div>

Agree to terms and conditions

</label>

You must agree before submitting.

</div>

<button class="btn btn-dark" type="submit">Create Account</button>

</div>

</form>

</div>

// Example starter JavaScript for disabling form submissions if there are invalid fields

(function () {

'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to

var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission

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>

Notice the JavaScript before the </body> tag.

An example of validating textarea, checkbox, and radio buttons

As mentioned earlier, you may also validate checkbox and radio buttons. You have seen checkbox in above example. For example, you need to confirm user if he/she agrees with the term & conditions via the checkbox’s checked/unchecked option.

Similarly, asking the user for the male/female option via radio buttons and so on.

See an example of validating the checkbox and radio button and textarea below:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>BS 5 Form Validation</h3>

<label for="validationTextarea" class="form-label">Textarea</label>

What is Your Message?

</div>

<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>

<div class="invalid-feedback">Example invalid feedback text</div>

</div>

<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>

</div>

<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>

<div class="invalid-feedback">More example invalid feedback text</div>

</div>

<option value="">Open this select menu</option>

<option value="3">Three</option>

</select>

<div class="invalid-feedback">Example invalid select feedback</div>

</div>

<div class="invalid-feedback">Example invalid form file feedback</div>

</div>

<button class="btn btn-primary" type="submit" disabled>Submit form</button>

</div>

</form>

</div>

</body>

</html>

Using tooltips for form validation example

If you want to display validation messages as styled tooltips, you need to swap:

.{valid|invalid}-feedback classes To
.{valid|invalid}-tooltip classes

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Looks Good!

</div>

<label for="validationTooltipUsername" class="form-label">Username</label>

Please choose a unique and valid username.

</div>

Please provide a valid city.

</div>

<label for="validationTooltip04" class="form-label">State</label>

<option selected disabled value="">Choose...</option>

</select>

Please select a valid state.

</div>

<button class="btn btn-primary" type="submit">Create Account</button>

</div>

</form>

// Example starter JavaScript for disabling form submissions if there are invalid fields

(function () {

'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to

var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission

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>

For reference and more details: https://getbootstrap.com/docs/5.0/forms/validation/

Forms

Doing Form Validation in Bootstrap 5

An example of BS 5 form validation with browser default style

See online demo and code

An example of browser default form with more form fields

See online demo and code

An example of custom CSS and JavaScript based form validation using BS 5

See online demo and code

An example of validating textarea, checkbox, and radio buttons

See online demo and code

Using tooltips for form validation example

See online demo and code

Related Tutorials: