client server form validator - Download Validate HTML Forms On The Client/Server Side - jQuery bValidator

Download Validate HTML Forms On The Client/Server Side – jQuery bValidator

By Posted on

This time I will share jQuery Plugin and tutorial about Validate HTML Forms On The Client/Server Side – jQuery bValidator, hope it will help you in programming stack.

client server form validator - Download Validate HTML Forms On The Client/Server Side - jQuery bValidator
File Size: 209 KB
Views Total: 1495
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

bValidator is a powerful, customizable, themeable validation engine to validate form fields (or any form fields) on the client or server side.

More features:

  • Supports HTML5 form validation attributes.
  • 13 built-in themes to fit your web design.
  • Custom validation messages.
  • 20+ built-in validation rules.
  • Custom validation functions.
  • Supports dynamic form fields.

Basic usage:

1. Download and load the jquery.bvalidator.min.js script after loading the latest jQuery library.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/jquery.bvalidator.min.js"></script>

2. Load a theme of your choice in the document. All possible themes:

  1. gray
  2. bs3popover
  3. bs3tooltip
  4. insert
  5. group
  6. gray2
  7. gray3
  8. gray4
  9. orange
  10. postit
  11. red
  12. bslikerc
  13. bslikert
view source
1 <link rel="stylesheet" href="/path/to/themes/bslikerc/bslikerc.css" />
2 <script src="/path/to/themes/bslikerc/bslikerc.js"></script>

3. Define the validation rules in the data-bvalidator attribute. All possible validation rules:

  1. alpha
  2. alphanum
  3. digit
  4. number
  5. email
  6. url
  7. date[dateFormat]
  8. required    
  9. between[minimum value, maximum value] 
  10. max[maximum value]
  11. min[minimum value]
  12. rangelen[minimum length, max length]   
  13. maxlen[maximum length]  
  14. minlen[minimum length]  
  15. extension[jpg:png:txt] 
  16. ip4
  17. ip6
  18. valempty
  19. ajax    
  20. differ[ElementId]  
  21. equal[ElementId]   
  22. pattern[pattern,modifier]
view source
1 <form>
2   Email: <input type="text" data-bvalidator="required,email" />
3   Url: <input type="text" data-bvalidator="required,url" />
4 </form>

4. Initialize the plugin by adding the data-bvalidator-validate attribute to the form element.

view source
1 <form data-bvalidator-validate>
2   Email: <input type="text" data-bvalidator="required,email" />
3   Url: <input type="text" data-bvalidator="required,url" />
4 </form>

5. Or by calling the function on the form element.

view source
1 $('form').bValidator();

6. All default options to customize the form engine.

view source
01 $('form').bValidator({
02   singleError           : false,
03   scrollToError         : true,
04   scrollToErrorOffset   : -10,     // px
05   lang                  : 'en',
06   validateOn            : '',      // 'change', 'blur', 'keyup' ...
07   errorValidateOn       : 'keyup', // 'change', 'blur', 'keyup' ...
08   delay<a href="https://www.jqueryscript.net/tags.php?/Validation/">Validation</a>       : 300,     // ms
09   validateOnSubmit      : true,
10   stopSubmitPropagation : true,
11   validateTillInvalid   : false,
12   skipValidation        : ':hidden, :disabled',
13   html5ValidationOff    : true,
14   enableHtml5Attr       : true,
15   useTheme              : '',
16   forceValidationResult : null,
17   noMsgIfExistsForInstance : [],
18  
19   errorMessageAttr     : '-msg',      // attribute which holds error message text (data-bvalidator-msg)
20   validateActionsAttr  : '',          // attribute for validation actions for the field (data-bvalidator)
21   validationResultAttr : '-return',   // attribute for making field always valid (data-bvalidator-return)
22   modifyActionsAttr    : '-modifier', // attribute for modifiers for the field (data-bvalidator-modifier)
23   setThemeAttr         : '-theme',    // Attribute for setting the theme name. Can be set on <form> or <input> (data-bvalidator-theme)
24   dataOptionNamespace  : 'Option',    // $.data namespace (data-bvalidator-option-)
25   html5selector        : 'input[type=email],input[type=url],input[type=number],[required],input[min],input[max],input[maxlength],input[minlength],input[pattern]', // selector for HTML5 inputs, used only if enableHtml5Attr=true
26   paramsDelimiter      : ':',
27   actionsDelimiter     : ',',
28  
29   autoModifiers : {
30     digit  : ['trim'],
31     number : ['trim'],
32     email  : ['trim'],
33     url    : ['trim'],
34     date   : ['trim'],
35     ip4    : ['trim'],
36     ip6    : ['trim']
37   },
38  
39   ajaxValid       : 'ok',
40   ajaxResponseMsg : false,
41   ajaxOptions : {
42     cache  : false,
43     method : 'POST'
44   },
45   ajaxParams : null,
46   ajaxUrl    : '',
47   ajaxCache  : true,
48  
49   themes : {}, // theme options
50  
51   // default messages
52   messages : {
53     en : {
54       'default' : 'Please correct this value.',
55       minlen    : 'The length must be at least {0} characters.',
56       maxlen    : 'The length must be at max {0} characters.',
57       rangelen  : 'The length must be between {0} and {1}.',
58       min       : 'Please enter a number greater than or equal to {0}.',
59       max       : 'Please enter a number less than or equal to {0}.',
60       between   : 'Please enter a number between {0} and {1}.',
61       required  : 'This field is required.',
62       alpha     : 'Please enter alphabetic characters only.',
63       alphanum  : 'Please enter alphanumeric characters only.',
64       digit     : 'Please enter only digits.',
65       number    : 'Please enter a valid number.',
66    &nb

source : jquery.net

Related posts: