Bootstrap Validation: How to validate a form using Bootsrap?

Bootstrap Validation is used to make sure that the important blocks on a form are not left empty. It ensures that the users are entering their data accurately and in the right format. Previously, JavaScript plugins were used to validate the inputs but now most browsers provide an in-built solution to handle validation of forms. 

In this blog, you’ll learn about:

• The layout of the form
• Required Attribute
• Maxlength and Minlength
• Pattern
• Form Validation in Bootstrap Studio

The Layout of the Form

A form design usually consists of a few input fields and buttons. Here, we shall be using three input fields – Name, Password, and Email input fields, and a “Submit” button.

HTML Code

<div class = "registration-form">
<form>
<h3 class = "text-center"> Create your account </h3>
<div class = "form-group">
<input class = "form-control item" type = "text" name = "username" maxlength = "15" minlength = "4" pattern = "^[a-zA-Z0-9_.-]*$" id = "username" placeholder = "Username" required>
</div>
<div class = "form-group">
<input class = "form-control item" type = "password" name = "password" minlength = "6" id = "password" placeholder = "Password" required>
</div>
<div class = "form-group">
<input class = "form-control item" type = "email" name = "Enter E-mail ID" id = "email" placeholder = "Enter E-mail ID" required>
</div>
<div class = "form-group">
<button class = "btn btn-primary btn-block create-account" type = "submit">Create Account</button>
</div>
</form>
</div>

CSS Code

html {
background-color:#214c84;
background-blend-mode:overlay;
display:flex;
align-items:center;
justify-content:center;
background-image:url(../../assets/img/image4.jpg);
background-repeat:no-repeat;
background-size:cover;
height:100%;
}

body {
background-color:transparent;
}

.registration-form {
padding:50px 0;
}

.registration-form form {
max-width:800px;
padding:50px 70px;
border-radius:10px;
box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
background-color:#fff;
}

.registration-form form h3 {
font-weight:bold;
margin-bottom:30px;
}

.registration-form .item {
border-radius:10px;
margin-bottom:25px;
padding:10px 20px;
}

.registration-form .create-account {
border-radius:30px;
padding:10px 20px;
font-size:18px;
font-weight:bold;
background-color:#3f93ff;
border:none;
color:white;
margin-top:20px;
}

@media (max-width: 576px) {
.registration-form form {
padding:50px 20px;
}
}

Let’s look into the Bootstrap Validation types used in the above code.

With HTML5, the easiest way for inline Bootstrap Validation is using the input attributes. There is a Hercules amount of attributes available, but here we will be looking into the ones used in the above HTML code.

Required Attribute

The required attribute is used to indicate that the field cannot be left empty. A user needs to fill all the required fields before submitting the form.

<input class = "form-control item" type ="email" name = "Enter E-mail ID" id ="Enter E-mail ID" placeholder = " Enter your Email ID" required>

Output:

Maxlength and Minlength

The max length and minlength attribute specify the maximum or the minimum number of characters or symbols the input field can hold. This attribute is useful when a user is asked to enter their password.

<input class = "form-control item" type = "password" name = "password" minlength = "6" id = "password" placeholder = "Password" required>

Output:

Pattern

This attribute specifies that a particular has to be matched while entering the data. It can be specified while entering a text, search, email, or password.

<input class = "form-control item" type = "text" name = "username" maxlength = "15" minlength = "4" pattern = "^[a-zA-Z0-9_.-]*$" id = "username" placeholder = "Username" required>

Output:

Form Bootstrap Validation in Bootstrap studio

With various methods available, Bootstrap offers the fastest and easiest way to validate the forms without even having to think or write any code. The built-in feature helps you set up forms instantly and design it according to your requirements.

With this, we have come to the end of this article. I hope you understood what is bootstrap validation.

Check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of this “Bootstrap Validation” blog and we will get back to you.