Here, we will see how to implement the form validation by using bootstrap 4 with validator.js plugin. For using this library we don’t have to wait until the web page gets refreshed to display the validation errors. It shows the validation errors when the user starts typing in the form’s input field.
We did not need any external scripts, all things will be handled by this validator js library. The client side validation is very easy by using this plugin. We need to add the below validator script on header to achieve this. Follow the below example.
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script> Example
Create a html file on your computer and add the below codes on it.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation With Bootstrap 4 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-5">
<div class="card">
<h2 class="card-header text-center">Bootstrap 4 Form Validation with validator.js</h2>
<div class="card-body">
<form role="form" data-toggle="validator">
<div class="form-group">
<label class="float-md-left">Name</label>
<input type="text" class="form-control" data-error="You must have a name." id="inputName" placeholder="Name" required>
<!-- Error message -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="float-md-left">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 message -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="float-md-left" class="float-md-left">Email Id</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<!-- Error message -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label class="float-md-left">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 message -->
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="float-md-left">Confirm Password</label>
<div class="form-group">
<input type="password" class="form-control" id="inputConfirmPassword"
data-match="#inputPassword" data-match-error="Password didn't match"
placeholder="Confirm" required />
<!-- Error message -->
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="float-md-left">Message</label>
<textarea class="form-control" data-error="Please enter the message." id="inputMessage"
placeholder="Message" required=""></textarea>
<!-- Error message -->
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html> Create an external stylesheet and link it to your html file.
html, body{
padding: 20px;
margin: 20px;
text-align: center;
background: #f1af1a;
}
.container {
max-width: 700px;
}
.has-error label, .has-error input, .has-error textarea {
color: red;
border-color: #FF0000;
}
.list-unstyled li {
font-size: 12px;
padding: 5px 0 0;
color: #FF0000;
}