How to do form validation with Bootstrap

Bootstrap is an open-source, front-end development framework created by engineers at Twitter. This framework can create responsive web applications using pre-defined CSS classes to style HTML attributes.

Form validation steps

Bootstrap provides its own inbuilt validation CSS classes and JavaScript functions that can be used together for form validation. To do so, we must take the following steps:

  1. First, to add the Bootstrap library to our HTML code file, we will add the links provided by the library using the <script></script> and <link> tags into the header.

Error: Code Tabs Widget Crashed, Please Contact Support
  1. Next, we will create a simple HTML form to implement form validation and make a form in which the user must input their name. We will include the class form-group in a div which will enclose a single input field.

Note: We need to add novalidate to the <form> </form> tag to disable the default validation by the broswer.

<form id="myForm" novalidate>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" required>
<div>
Please enter your name.
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form without validation classes
  1. Now that we have created a simple input form, we will add the classes offered by Bootstrap that validate the form's input fields. To do this, we will add the class needs-validation into the form tag.

  2. We will add another div element that will be executed if the form validation fails. The class for this div element will be invalid-feedback so our code will look something like this:

<form id="myForm" class="needs-validation" novalidate>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">
Please enter your name.
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form after adding validation classes
  1. We will then bind an event listener to the button so that an event gets triggered when a user clicks the button. This will check the form for any validation errors.

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {}, false);
</script>
Script to add button event listener
  1. If there is a validation error, we will stop the form before it is processed. To do this, we will use the function event.stopPropagation(). Another issue we must address is the browser's default form submission behavior so it doesn't process a form with validation errors. To stop the browser's default submission, we will use the function event.preventDefault().

  2. If the form passes the validation check, we have to include the Bootstrap class was-validated in the <form> tag. Therefore, we will use the function classList.add("was-validated"). Our script should look something like this:

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
if (this.checkValidity() === false) {
event.stopPropagation();
this.classList.add("was-validated");
}, false);
</script>
Validation script on button
  1. Now whenever we click the form button, a validation event will be triggered, which will check the form's input. If the validation checks are passed, the form shall be processed.

Sample project

Below, we see a project which contains a similar index.html file to what we created using the steps above. The only difference is that we now have two input fields one for name and one for email.

When we click the run button below, we can observe how the form behaves on valid and invalid inputs.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved