Browse Source

#21: Add Callback validator

nghuuphuoc 12 years ago
parent
commit
cd79ef0e4b
6 changed files with 98 additions and 1 deletions
  1. 2 0
      CHANGELOG.md
  2. 20 0
      README.md
  3. 25 0
      demo/index.html
  4. 25 0
      dist/js/bootstrapValidator.js
  5. 1 1
      dist/js/bootstrapValidator.min.js
  6. 25 0
      src/js/validator/callback.js

+ 2 - 0
CHANGELOG.md

@@ -2,6 +2,8 @@
 
 __v0.2.0__
 * Add custom submit handler (using ```submitHandler``` option)
+* Add ```callback``` validator
+* Add ```creditCard``` validator
 * Add ```different``` validator
 
 __v0.1.1 (2013-10-17)__

+ 20 - 0
README.md

@@ -84,6 +84,7 @@ Below is the list of built-in validators sorted in alphabetical order:
 Validator name                          | Description
 ----------------------------------------|------------
 [between](#between-validator)           | Check if the input value is between (strictly or not) two given numbers
+[callback](#callback-validator)         | Return the validity from a callback method
 creditCard                              | Validate a credit card number
 [different](#different-validator)       | Return true if the input value is different with given field's value
 digits                                  | Return true if the value contains only digits
@@ -112,6 +113,25 @@ min (*)     | n/a     | The lower value in the range
 max (*)     | n/a     | The upper value in the range
 inclusive   | true    | Can be true or false. If true, the input value must be in the range strictly
 
+### Callback Validator
+
+Option name  | Default | Description
+-------------|---------|------------
+message      | n/a     | The error message
+callback (*) | n/a     | The callback method
+
+The callback method must follow the format below:
+
+```
+function(fieldValue, validator) {
+    // fieldValue is the value of field
+    // validator is instance of BootstrapValidator
+
+    // Check the field validity
+    // return true or false
+}
+```
+
 ### Different Validator
 
 Option name | Default | Description

+ 25 - 0
demo/index.html

@@ -50,6 +50,13 @@
                         </div>
 
                         <div class="form-group">
+                            <label class="col-lg-3 control-label" id="captchaOperation"></label>
+                            <div class="col-lg-2">
+                                <input type="text" class="form-control" name="captcha" />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
                             <div class="col-lg-9 col-lg-offset-3">
                                 <button type="submit" class="btn btn-primary">Sign up</button>
                             </div>
@@ -63,6 +70,12 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
+    // Generate a simple captcha
+    function randomNumber(min, max) {
+        return Math.floor(Math.random() * (max - min + 1) + min);
+    };
+    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
+
     $('#defaultForm').bootstrapValidator({
         message: 'This value is not valid',
         fields: {
@@ -126,6 +139,18 @@ $(document).ready(function() {
                         message: 'The password can\'t be the same as username'
                     }
                 }
+            },
+            captcha: {
+                validators: {
+                    callback: {
+                        message: 'Wrong answer',
+                        callback: function(value, validator) {
+                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
+                            console.log(sum);
+                            return value == sum;
+                        }
+                    }
+                }
             }
         }
     });

+ 25 - 0
dist/js/bootstrapValidator.js

@@ -339,6 +339,31 @@
     };
 }(window.jQuery));
 ;(function($) {
+    $.fn.bootstrapValidator.validators.callback = {
+        /**
+         * Return result from the callback method
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - callback: The callback method that passes 2 parameters:
+         *      callback: function(fieldValue, validator) {
+         *          // fieldValue is the value of field
+         *          // validator is instance of BootstrapValidator
+         *      }
+         * - message: The invalid message
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val();
+            if (options.callback && 'function' == typeof options.callback) {
+                return options.callback.call(this, value, this);
+            }
+            return true;
+        }
+    };
+}(window.jQuery));
+;(function($) {
     $.fn.bootstrapValidator.validators.creditCard = {
         /**
          * Return true if the input value is valid credit card number

File diff suppressed because it is too large
+ 1 - 1
dist/js/bootstrapValidator.min.js


+ 25 - 0
src/js/validator/callback.js

@@ -0,0 +1,25 @@
+(function($) {
+    $.fn.bootstrapValidator.validators.callback = {
+        /**
+         * Return result from the callback method
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - callback: The callback method that passes 2 parameters:
+         *      callback: function(fieldValue, validator) {
+         *          // fieldValue is the value of field
+         *          // validator is instance of BootstrapValidator
+         *      }
+         * - message: The invalid message
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val();
+            if (options.callback && 'function' == typeof options.callback) {
+                return options.callback.call(this, value, this);
+            }
+            return true;
+        }
+    };
+}(window.jQuery));