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
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
How to Validate Phone Number using jQuery Input Mask Plugin ? An input mask is a string expression that demonstrates the format of a valid user input value or we can say that it constrains user input. This is very useful if there are certain inputs in forms that require validation. In this article, we will learn how to apply an input mask for validating a phon
3 min read
jQWidgets jqxValidator validateInput() Method jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxValidator is used for validation of the HTML form with the help of JavaScript. It has some set of build-in r
2 min read
jQWidgets jqxValidator validate() Method jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxValidator is used for validation of the HTML form with the help of JavaScript. It has some set of build-in r
2 min read
How to load and validate form data using jQuery EasyUI ? EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and, Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. It helps in building features for interactive web and mobile applicati
4 min read