Open In App

Form validation using the jbvalidator Plugin

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet">
  <script
  </script>
 
  <!-- Include jQuery -->
  <script
          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: 

 

  •  When the passwords entered by the user are not matching.

 

          

 

When passwords 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: 

 

 



Last Updated : 07 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads