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.
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" > |
04 |
< input type = "email" class = "form-control" placeholder = "name@example.com" required> |
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> |
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> |
14 |
< div class = "form-group" > |
16 |
< input type = "url" class = "form-control" placeholder = "http://www" required> |
18 |
< div class = "form-group" > |
19 |
< label >Using Regex</ label > |
20 |
< input type = "text" class = "form-control" pattern = "[0-9]+" title = "Only number." required> |
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" > |
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" > |
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 > |
41 |
< div class = "form-group" > |
42 |
< label >Textarea</ label > |
43 |
< textarea class = "form-control" minlength = "10" maxlength = "165" ></ textarea > |
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" > |
52 |
< div class = "form-check" > |
53 |
< input class = "form-check-input" type = "checkbox" value = "" id = "defaultCheck2" > |
54 |
< label class = "form-check-label" for = "defaultCheck2" > |