Skip to content
Related Articles

Related Articles

Form validation using the jbvalidator Plugin
  • Last Updated : 18 Nov, 2020
GeeksforGeeks - Summer Carnival Banner

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
       necesaary 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: 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :