Home Explore Help
Sign In
githab
/
bootstrapvalidator
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add the plugin instance to validator method; Add identical validator

nghuuphuoc 12 years ago
parent
c9d1d3f43c
commit
e88b38771d
6 changed files with 82 additions and 15 deletions
Split View Show Diff Stats
  1. 31 3
      demo/index.html
  2. 10 4
      src/js/bootstrapvalidate.js
  3. 26 0
      src/js/validator/identical.js
  4. 3 2
      src/js/validator/notEmpty.js
  5. 5 3
      src/js/validator/regexp.js
  6. 7 3
      src/js/validator/stringLength.js

+ 31 - 3
demo/index.html
View File 

@@ -12,9 +12,10 @@
 
     <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
 
     <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
 
     <script type="text/javascript" src="../src/js/bootstrapValidate.js"></script>
 
+    <script type="text/javascript" src="../src/js/validator/identical.js"></script>
 
     <script type="text/javascript" src="../src/js/validator/notEmpty.js"></script>
 
-    <script type="text/javascript" src="../src/js/validator/stringLength.js"></script>
 
     <script type="text/javascript" src="../src/js/validator/regexp.js"></script>
 
+    <script type="text/javascript" src="../src/js/validator/stringLength.js"></script>
 
 </head>
 
 <body>
 
     <div class="container">
 
@@ -39,10 +40,15 @@
 
                             <input type="password" class="form-control" name="password" placeholder="Password" />
 
                         </div>
 
 
+                        <div class="form-group">
 
+                            <input type="password" class="form-control" name="confirmPassword" placeholder="Retype password" />
 
+                        </div>
 
+
 
                         <button type="submit" class="btn btn-primary">Sign up</button>
 
                     </form>
 
                 </div>
 
             </section>
 
+            <!-- :form -->
 
         </div>
 
     </div>
 
 
@@ -69,8 +75,30 @@ $(document).ready(function() {
 
             },
 
             email: {
 
                 validator: {
 
-                    emailAddress: {
 
-                        message: 'The value is not a valid email address'
 
+                    notEmpty: {
 
+                        message: 'The email address is required and can\'t be empty'
 
+                    }
 
+                }
 
+            },
 
+            password: {
 
+                validator: {
 
+                    notEmpty: {
 
+                        message: 'The password is required and can\'t be empty'
 
+                    },
 
+                    identical: {
 
+                        field: 'confirmPassword',
 
+                        message: 'The password and its confirm are not the same'
 
+                    }
 
+                }
 
+            },
 
+            confirmPassword: {
 
+                validator: {
 
+                    notEmpty: {
 
+                        message: 'The confirm password is required and can\'t be empty'
 
+                    },
 
+                    identical: {
 
+                        field: 'password',
 
+                        message: 'The password and its confirm are not the same'
 
                     }
 
                 }
 
             }

+ 10 - 4
src/js/bootstrapvalidate.js
View File 

@@ -46,6 +46,14 @@
 
 
         prototype: {
 
             /**
 
+             * Retrieve the form element
 
+             * @returns {jQuery}
 
+             */
 
+            getForm: function() {
 
+                return this.$form;
 
+            },
 
+
 
+            /**
 
              * Validate form
 
              */
 
             validate: function() {
 
@@ -57,8 +65,6 @@
 
                 }
 
             },
 
 
-            // PRIVATE METHODS
 
-
 
             validateField: function(field) {
 
                 if (this.options.fields[field] == null || this.options.fields[field].validator == null) {
 
                     return;
 
@@ -79,7 +85,7 @@
 
                                 continue;
 
                             }
 
                             var options = validators[validatorName];
 
-                            if (!$.bootstrapValidator.validator[validatorName].validate(fieldElement, options)) {
 
+                            if (!$.bootstrapValidator.validator[validatorName].validate(that, fieldElement, options)) {
 
                                 that.showError(fieldElement, validatorName);
 
                                 break;
 
                             } else {
 
@@ -126,7 +132,7 @@
 
                                 .width(tipWidth);
 
                             $(this).css('position', 'absolute')
 
                                    .css('left', tipLeft - $(this).width() + w + 5)
 
-                                   .css('top', tipTop + tipHeight / 2 - parseInt($(this).height()) / 2 - h + 5);
 
+                                   .css('top', tipTop + tipHeight / 2 - $(this).height() / 2 - h + 5);
 
                         }
 
                     });
 
                 }

+ 26 - 0
src/js/validator/identical.js
View File 

@@ -0,0 +1,26 @@
 
+(function($) {
 
+    $.extend($.bootstrapValidator.validator, {
 
+        identical: {
 
+            /**
 
+             * Check if input value equals to value of particular one
 
+             *
 
+             * @param {bootstrapValidator} validateInstance Validate plugin instance
 
+             * @param {HTMLElement} element
 
+             * @param {Object} options Consists of the following key:
 
+             * - field: The name of field that will be used to compare with current one
 
+             * @returns {boolean}
 
+             */
 
+            validate: function(validateInstance, element, options) {
 
+                var value        = $(element).val(),
 
+                    $field       = $(element),
 
+                    $compareWith = validateInstance.getForm().find('[name="' + options.field + '"]');
 
+                if (value == $compareWith.val()) {
 
+                    validateInstance.removeError($compareWith);
 
+                    return true;
 
+                } else {
 
+                    return false;
 
+                }
 
+            }
 
+        }
 
+    });
 
+}(window.jQuery));

+ 3 - 2
src/js/validator/notEmpty.js
View File 

@@ -2,13 +2,14 @@
 
     $.extend($.bootstrapValidator.validator, {
 
         notEmpty: {
 
             /**
 
-             * Check an input value is empty or not
 
+             * Check if input value is empty or not
 
              *
 
+             * @param {bootstrapValidator} validateInstance Validate plugin instance
 
              * @param {HTMLElement} element
 
              * @param {Object} options
 
              * @returns {boolean}
 
              */
 
-            validate: function(element, options) {
 
+            validate: function(validateInstance, element, options) {
 
                 var value = $.trim($(element).val());
 
                 return (value != '');
 
             }

+ 5 - 3
src/js/validator/regexp.js
View File 

@@ -2,13 +2,15 @@
 
     $.extend($.bootstrapValidator.validator, {
 
         regexp: {
 
             /**
 
-             * Check the element value matches given regular expression
 
+             * Check if the element value matches given regular expression
 
              *
 
+             * @param {bootstrapValidator} validateInstance Validate plugin instance
 
              * @param {HTMLElement} element
 
-             * @param {Object} options
 
+             * @param {Object} options Consists of the following key:
 
+             * - regexp: The regular expression you need to check
 
              * @returns {boolean}
 
              */
 
-            validate: function(element, options) {
 
+            validate: function(validateInstance, element, options) {
 
                 var value = $.trim($(element).val());
 
                 return value.match(options.regexp);
 
             }

+ 7 - 3
src/js/validator/stringLength.js
View File 

@@ -2,13 +2,17 @@
 
     $.extend($.bootstrapValidator.validator, {
 
         stringLength: {
 
             /**
 
-             * Check the length of element value is less or more than given number
 
+             * Check if the length of element value is less or more than given number
 
              *
 
+             * @param {bootstrapValidator} validateInstance Validate plugin instance
 
              * @param {HTMLElement} element
 
-             * @param {Object} options
 
+             * @param {Object} options Consists of following keys:
 
+             * - min
 
+             * - max
 
+             * At least one of two keys is required
 
              * @returns {boolean}
 
              */
 
-            validate: function(element, options) {
 
+            validate: function(validateInstance, element, options) {
 
                 var value = $.trim($(element).val()), length = value.length;
 
                 if ((options.min && length < options.min) || (options.max && length > options.max)) {
 
                     return false;