Form validation using the jbvalidator Plugin
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/bootstrap@5.0.0-alpha3/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;" > w3wiki- form validation using jbValidator </ h2 > < div class = "container" > < form class = "needs-validation" novalidate> Email ID:< br > < input type = "email" class = "form-control" placeholder = "name@mailid.com" 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:
- When the passwords entered by the user are not matching.
- When the user gives incomplete information.
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:
Contact Us