Form validation using the jbvalidator Plugin
Last Updated :
22 Jul, 2024
jbvalidator is a jQuery and Bootstrap based plugin which supports both client and server form validations. The provided HTML data attributes are easy to use and understand. The plugin gives multi-language facilities along with custom validation rules and messages.
The plugin can be used by downloading the required pre-compiled files from the official website. The script files can then be included in the pages where validation is required.
The examples below demonstrate the different types of validation available:
Example 1: The following code demonstrates form validations for email id and passwords.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS and JavaScript file -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js">
</script>
<!-- Include jQuery -->
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous">
</script>
<!-- Include the jbvalidator script -->
<script src="dist/jbvalidator.min.js">
</script>
</head>
<body>
<br>
<h2 style="color:green; padding: 10px 60px;">
GeeksforGeeks- form validation using jbValidator
</h2>
<div class="container">
<form class="needs-validation" novalidate>
Email ID:<br>
<input type="email" class="form-control"
placeholder="[email protected]" required>
<br>
Password:<br>
<input type="password" class="form-control"
id="password" title="password" required>
<br>
Re-enter password:<br>
<input name="repassword" type="password"
class="form-control"
data-v-equal="#password" required>
<br>
<input type="submit" value="Submit">
</form>
</div>
<script>
$(function () {
// Select the form elements that
// need validation and
// initialize the validator
let validator = $('form.needs-validation')
.jbvalidator({
// Show error message
errorMessage: true,
// Change the appearance of the form
// when correct information is entered
successClass: true,
// Specify the language file for
// the error and help text
language: 'dist/lang/en.json'
});
})
</script>
</body>
</html>
Â
 Output:
Example 2: The following code snippet demonstrates the validation for checkboxes. Please use the code snippet in the above HTML code inside the form element.
HTML
<form class="needs-validation" novalidate>
<!-- The data-v-min-select attribute specifies
that a minimum of 2 options must
be checked -->
<div data-checkbox-group data-v-min-select="2"
data-v-required>
Choose languages you know:
<br>
<input type="checkbox" name="C"
value="yes">C
<br>
<input type="checkbox" name="C++"
value="yes">C++
<br>
<input type="checkbox" name="Java"
value="yes">Java
<br>
<input type="checkbox" name="Python"
value="yes">Python
<br>
</div>
<input type="submit" value="Submit">
</form>
Â
Â
Output:Â
Example 3: The following code snippet demonstrates the use of a color panel in the user's form element.
Â
HTML
<form class="needs-validation" novalidate>
<b>Choose a colour: </b>
<br>
<!-- The required attribute makes it
necessary to specify a color -->
<input type="color" name="color"
class="form-control"
required>
<br>
<input type="submit" value="Submit">
</form>
Â
Â
Output:Â
Example 4: The following code snippet demonstrates the use of select boxes in the user's form element.
HTML
<form class="needs-validation" novalidate>
<label for="country">Country:</label>
<!-- The multiple data-v-min-select attribute
specifies the minimum number of options
the user has to select -->
<!-- The multiple data-v-max-select attribute
specifies the maximum number of options
the user has to select -->
<select name="country" id="country" class="form-select"
multiple data-v-min-select="1"
data-v-max-select="3"
required>
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select><br>
<input type="submit" value="Submit">
</form>
Â
Â
Output:
Â
Example 5: The following code snippet demonstrates the use of the <textarea> element in the user's form element.
HTML
<form class="needs-validation" novalidate>
Enter your text content:<br>
<!-- The minlength attribute specifies
the minimum length of the text allowed -->
<!-- The maxlength attribute specifies
the maximum length of the text allowed -->
<textarea class="form-control"
minlength="10"
maxlength="120">
</textarea>
<br>
<input type="submit" value="Submit">
</form>
Â
Â
Output:
Â
Â
Example 6: The following code snippet demonstrates the use of URL control in the user's form element.
Â
HTML
<form class="needs-validation" novalidate>
<div>
<b>Enter URL: </b>
<br>
<!-- The placeholder attribute holds the
text to be used as a placeholder -->
<!-- The required attribute makes it
necessary to fill the text -->
<input type="url" class="form-control"
placeholder="https://www" required><br>
</div>
<input type="submit" value="Submit">
</form>
 Output:
 Example 7: The following code snippet demonstrates the other controls in the user's form element.
HTML
<form class="needs-validation" novalidate>
<b>Regex:</b>
<br>
<!-- The pattern attribute is the regex pattern -->
<!-- The title attribute is the error text -->
<input type="text" class="form-control"
pattern="[0-9]+"
title="Only numbers." required>
<br>
<b>Enter number in range:</b>
<!-- The min attribute is the
minimum number allowed -->
<!-- The max attribute is the
maximum number allowed -->
<input type="number" class="form-control"
min="50"
max="500" required>
<br>
<b>Enter custom number in range:</b>
<!-- The data-v-min attribute is the
custom minimum length allowed
The data-v-max attribute is the
custom maximum length allowed -->
<input type="number" class="form-control"
data-v-min="20"
data-v-max="100" required>
<br>
<b>Choose file:</b>
<!-- The data-v-min-size attribute is the
custom minimum file size allowed
The data-v-max-size attribute is the
custom maximum file size allowed -->
<input type="file" class="form-control"
data-v-min-size="100"
data-v-max-size="1000">
<br>
<input type="submit" value="Submit">
</form>
 Output:Â
Similar Reads
Form Validation using jQuery Form validation is a process of confirming the relevant information entered by the user in the input field. In this article, we will be validating a simple form that consists of a username, password, and a confirmed password using jQuery.Below are the approaches for validation of form using jQuery:T
5 min read
Password Validation Form Using JavaScript The password Validation form is used to check the password requirements such as the password must have at least one Uppercase, or lowercase, number, and the length of the password. We can also check this after submitting the form but it's not recommended. We can easily check before submitting the fo
4 min read
JavaScript Form Validation JavaScript form validation checks user input before submitting the form to ensure it's correct. It helps catch errors and improves the user experience.What we are going to CreateIn this article, we will guide you through creating a form validation application. This application will validate essentia
10 min read
ReactJS Form Validation using Formik and Yup ReactJS Form Validation using Formik and Yup packages is one good approach for form validation. we can validate forms using controlled components. But it may be time-consuming and the length of the code may increase if we need forms at many places on our website. Formik is designed to manage forms w
3 min read
How to create form validation by using only HTML ? In Web Development, we often use JavaScript with HTML to validate the form, but we can also do the same via HTML in the following ways. HTML <input> required Attribute HTML <input> type Attribute HTML <input> pattern Attribute HTML <input> required Attribute: In input tag of
2 min read
Spectre Forms Form validation styles Spectre Forms validation styles class is used to style the form. To use form validation styles, you can either add is-success or is-error class to the controls. Add has-success or has-error class to parent elements. Use the form-input-hint class to provide form validation success and error messages.
2 min read
PHP Form Validation Form validation is a crucial step that needs to be completed before submitting data to the database. This process is performed to prevent any errors or faulty data from being inserted into the database. The HTML form includes various input fields such as email, text, checkbox, radio button, etc. The
7 min read
Custom Field Validations in Django Forms This article revolves around how to add custom validation to a particular field. For example to add validation of an email to a CharField by specifying a particular format. There can be multiple ways on how to achieve custom validation. In this article, we are going to show it from the form itself s
2 min read
React Suite Components Form validation React Suite is a front-end library, containing a wide range of React Components used in enterprise applications. This article discusses how the React suite's Form Validation helps developers add validation to forms. Form Validation involves providing prompt information to the user when there is an e
7 min read
JavaScript - How to Validate Form Using Regular Expression? To validate a form in JavaScript, you can use Regular Expressions (RegExp) to ensure that user input follows the correct format. In this article, we'll explore how to validate common form fields such as email, phone number, and password using RegExp patterns.1. Validating an Email AddressOne of the
4 min read