Bootstrap 4 Form Validation with Validator.js Tutorial
In the web development world, we deal with form validation almost at every step. Whether it is a sign-in or login form, sign-up or registration form, contact us form, any form may emerge from anywhere.
In this tutorial, we will learn how to implement validation in the Bootstrap 4 form with Bootstrap Validator third party plugin.
The best thing about validator.js library is, you don’t have to wait until the web page gets refreshed to display the validation errors. It manifests form validation errors when the user starts typing in the form’s input field.
Our Bootstrap 4 Form validation with Validator.JS demo is solely dependent on Validate.js, So let us know a little bit about it.
Validate.js offers simple yet powerful ways to validate Bootstrap form input or elements. You can get this project from GitHub, and yes, you can share your valuable feedback.
This plugin makes client-side validation in Bootstrap super easy, and even you don’t require to refresh the page to get the form errors. It is not limited to just Bootstrap. Instead, you can use other language frameworks such as Codeigniter, Symphony, Laravel, and many more.
Add Bootstrap Validator
Let us invoke the most important task of this Bootstrap 4 Form Validation tutorial. We have to add the Bootstrap 4 and Bootstrap Validator CSS (Validator.js) via the CDN link. Open your HTML template and place the following CSS and jQuery links in the head section.
<head>
<title> Bootstrap 4 Form Validation with Validator.js Example | positronx.io</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
</head>Create Form with Bootstrap
Bootstrap form design is a quintessential craft of team bootstrap. Bootstrap UI elements helpful in sustaining the impetus of web development, we have already added the Bootstrap UI framework CSS.
Now, we are creating the Form using one such element of Bootstrap UI. It makes the form validation process in Bootstrap easy.
<form role="form">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<div class="form-group">
<input type="password" class="form-control" id="inputConfirmPassword" placeholder="Confirm">
</div>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" id="inputMessage" placeholder="Message" required=""></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Send</button>
</div>
</form>Final Bootstrap 4 Form Validation Example
Eventually, everything has been placed at its place. Now, i will show you how to add validation in Bootstrap form and display custom error messages.
We will implement the following validations in our form.
- Required
- Min Length
- Max Length
- Password Confirmation
<html class="no-js" lang="en">
<head>
<title> Bootstrap 4 Form Validation with Validator.js Example | positronx.io</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<style>
body {
background: #EECDA3;
background: -webkit-linear-gradient(to top, #EF629F, #EECDA3);
background: linear-gradient(to top, #EF629F, #EECDA3);
}
.container {
max-width: 550px;
}
.has-error label,
.has-error input,
.has-error textarea {
color: red;
border-color: red;
}
.list-unstyled li {
font-size: 13px;
padding: 4px 0 0;
color: red;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="card">
<h5 class="card-header text-center">Bootstrap 4 Form Validation Demo</h5>
<div class="card-body">
<form role="form" data-toggle="validator">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" data-error="You must have a name." id="inputName" placeholder="Name" required>
<!-- Error -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" maxlength="10" minlength="3"
pattern="^[a-zA-Z0-9_.-]*$" id="inputUsername" placeholder="Username" required>
<!-- Error -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<!-- Error -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Password</label>
<div class="form-group">
<input type="password" data-minlength="4" class="form-control" id="inputPassword"
data-error="Have atleast 4 characters" placeholder="Password" required />
<!-- Error -->
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<div class="form-group">
<input type="password" class="form-control" id="inputConfirmPassword"
data-match="#inputPassword" data-match-error="Password don't match"
placeholder="Confirm" required />
<!-- Error -->
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" data-error="Please enter message." id="inputMessage"
placeholder="Message" required=""></textarea>
<!-- Error -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Send</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Finally, we have completed this tutorial. In the above form validation example, we have highlighted the necessary validations.
The Bootstrap validator plugin is a user-friendly and straightforward form validator plugin, and it works smoothly.
