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/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;"> GeeksforGeeks- 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:
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: