bootstrap 5 jbvalidator - Free Download HTML5 Form Validator For Bootstrap 5 - jbvalidator

Free Download HTML5 Form Validator For Bootstrap 5 – jbvalidator

Posted on

This time I will share jQuery Plugin and tutorial about HTML5 Form Validator For Bootstrap 5 – jbvalidator, hope it will help you in programming stack.

bootstrap 5 jbvalidator - Free Download HTML5 Form Validator For Bootstrap 5 - jbvalidator
File Size: 197 KB
Views Total: 1508
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jbvalidator is a fresh new jQuery based form validation plugin that is created for the latest Bootstrap 5 framework and supports both client side and server-side validation.

More Features:

  • Multiple languages.
  • Custom error messages.
  • Custom validation rules.
  • Easy to use via HTML data attribute.

How to use it:

1. Load the latest jQuery JavaScript library and Bootstrap 5 framework in the document.

1 <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/cdn/bootstrap.min.js"></script>

2. Add the novalidate attribute to the form element and apply validators to form fields using the following HTML data attributes:

  • data-v-equal: id of the password field where the values should be the same
  • data-v-min-select: min number of options should be selected
  • data-v-max-select: max number of options allowed to be selected
  • data-checkbox-group: the parent attribute of group checkbox elements
  • data-v-min-select: min number of checkboxes should be selected
  • data-v-required: parent attribute required
  • data-v-min: min value
  • data-v-max: max value
  • data-v-min-length: min length
  • data-v-max-length: max length
  • data-v-min-size: min size
  • data-v-max-size: max size
  • data-v-message: custom error message
01 <form class="example" novalidate>
02   <div class="form-group">
03     <label>Email</label>
04     <input type="email" class="form-control" placeholder="name@example.com" required>
05   </div>
06   <div class="form-group">
07     <label for="password">Password</label>
08     <input type="password" name="password" class="form-control" id="password" title="password" required>
09   </div>
10   <div class="form-group">
11     <label for="password">Confirm Password</label>
12     <input name="repassword" type="password" class="form-control" data-v-equal="#password" required>
13   </div>
14   <div class="form-group">
15     <label>URL</label>
16     <input type="url" class="form-control" placeholder="http://www" required>
17   </div>
18   <div class="form-group">
19     <label>Using Regex</label>
20     <input type="text" class="form-control" pattern="[0-9]+" title="Only number." required>
21   </div>
22   <div class="form-group">
23     <label>Custom Min/Max Values</label>
24     <input type="text" class="form-control" data-v-min="10" data-v-max="100">
25   </div>
26   <div class="form-group">
27     <label>Custom Min/Max Length</label>
28     <input type="text" class="form-control" data-v-min-length="5" data-v-max-length="10">
29   </div>
30   <div class="form-group">
31     <label>Multiple Select</label>
32     <select class="form-select" multiple data-v-min-select="2" data-v-max-select="3">
33       <option selected>Open this select menu</option>
34       <option value="1">One</option>
35       <option value="2">Two</option>
36       <option value="3">Three</option>
37       <option value="4">Four</option>
38       <option value="5">Five</option>
39     </select>
40   </div>
41   <div class="form-group">
42     <label>Textarea</label>
43     <textarea class="form-control" minlength="10" maxlength="165"></textarea>
44   </div>
45   <div class="form-group">
46     <div class="form-check">
47       <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" >
48       <label class="form-check-label" for="defaultCheck1">
49       checkbox 1
50       </label>
51     </div>
52     <div class="form-check">
53       <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" >
54       <label class="form-check-label" for="defaultCheck2">
55       checkbox 2
56       </label>
57     </div>