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.
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:
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.
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>
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.
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>
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>
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()
.
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>
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.
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