Skip to content
Related Articles

Related Articles

Improve Article

Form validation using the jbvalidator Plugin

  • Last Updated : 07 Jul, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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: 

 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :