Release v0.1.0

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-v0.1.0
+v0.1.0 (2013-10-14)
 
 * First release
 * Provide various validators

README.md

@@ -1,9 +1,10 @@
-# bootstrapValidator
+# BootstrapValidator
 
 A jQuery plugin to validate form fields. Use with Bootstrap 3
 
 ## Features
 
+* Built from scratch
 * Many built-in [validators](#validators)
 
 ## Required
@@ -42,7 +43,6 @@ $(document).ready(function() {
 
         // The submit buttons selector
         // These buttons will be disabled when the form input are invalid
-
         submitButtons: ...,
 
         // The fields which need to be validated
@@ -187,10 +187,12 @@ Look at the [Change Log](CHANGELOG.md)
 
 Nguyen Huu Phuoc ([Email](mailto: phuoc@huuphuoc.me) / [Twitter](http://twitter.com/nghuuphuoc) / [Github](http://github.com/nghuuphuoc))
 
-Vu Minh Khang ([Email](mailto: khangvm530@gmail.com) / [Github](https://github.com/khangvm53))
+Big thanks to the contributors:
+
+* Vu Minh Khang ([Email](mailto: khangvm530@gmail.com) / [Github](https://github.com/khangvm53))
 
 ## License
 
 Copyright (c) 2013 Nguyen Huu Phuoc
 
-bootstrapValidator is licensed under the MIT license.
+BootstrapValidator is licensed under the MIT license.

dist/css/bootstrapValidator.css

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *

dist/css/bootstrapValidator.min.css

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator v0.1.0 (http://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator v0.1.0 (http://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *

dist/css/bootstrapValidator.scss

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *

dist/js/bootstrapValidator.js

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator v0.1.0 (http://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator v0.1.0 (http://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -16,6 +16,7 @@
         this.invalidFields      = {};
         this.xhrRequests        = {};
         this.numPendingRequests = null;
+        this.formSubmited       = false;
 
         this._init();
     };
@@ -28,6 +29,10 @@
         // Default invalid message
         message: 'This value is not valid',
 
+        // The submit buttons selector
+        // These buttons will be disabled when the form input are invalid
+        submitButtons: 'button[type="submit"]',
+
         // Map the field name with validator rules
         fields: null
     };
@@ -35,6 +40,9 @@
     BootstrapValidator.prototype = {
         constructor: BootstrapValidator,
 
+        /**
+         * Init form
+         */
         _init: function() {
             if (this.options.fields == null) {
                 return;
@@ -47,16 +55,16 @@
                     that.formSubmited = true;
                     if (that.options.fields) {
                         for (var field in that.options.fields) {
-                            if(that.numPendingRequests > 0 || that.numPendingRequests == null ){
-                                // Check that field is validated?
+                            if (that.numPendingRequests > 0 || that.numPendingRequests == null) {
+                                // Check if the field is valid
                                 var $field = that.getFieldElement(field);
-                                if( $field.attr('fieldIsValid') == 1 || $field.attr('fieldIsValid') == '1' ){
-                                }else{
+                                if ($field.data('bootstrapValidator.isValid') !== true) {
                                     that.validateField(field);
                                 }
                             }
                         }
                         if (!that.isValid()) {
+                            that.$form.find(that.options.submitButtons).attr('disabled', 'disabled');
                             e.preventDefault();
                         }
                     }
@@ -67,6 +75,11 @@
             }
         },
 
+        /**
+         * Init field
+         *
+         * @param {String} field The field name
+         */
         _initField: function(field) {
             if (this.options.fields[field] == null || this.options.fields[field].validators == null) {
                 return;
@@ -114,15 +127,27 @@
             var type  = $field.attr('type'),
                 event = ('checkbox' == type || 'radio' == type) ? 'change' : 'keyup';
             $field.on(event, function() {
+                that.formSubmited = false;
                 that.validateField(field);
             });
         },
 
+        /**
+         * Get field element
+         *
+         * @param {String} field The field name
+         * @returns {jQuery}
+         */
         getFieldElement: function(field) {
             var fields = this.$form.find('[name="' + field + '"]');
             return (fields.length == 0) ? null : $(fields[0]);
         },
 
+        /**
+         * Validate given field
+         *
+         * @param {String} field The field name
+         */
         validateField: function(field) {
             var $field = this.getFieldElement(field);
             if (null == $field) {
@@ -132,9 +157,7 @@
             var that       = this,
                 validators = that.options.fields[field].validators;
             for (var validatorName in validators) {
-                if (!$.fn.bootstrapValidator.validators[validatorName]
-//                        || (this.xhrRequests[field] && this.xhrRequests[field][validatorName])
-                    ) {     // Do not perform if there is pending remote validation
+                if (!$.fn.bootstrapValidator.validators[validatorName]) {
                     continue;
                 }
                 var isValid = $.fn.bootstrapValidator.validators[validatorName].validate(that, $field, validators[validatorName]);
@@ -147,6 +170,12 @@
             }
         },
 
+        /**
+         * Show field error
+         *
+         * @param {jQuery} $field The field element
+         * @param {String} validatorName
+         */
         showError: function($field, validatorName) {
             var field     = $field.attr('name'),
                 validator = this.options.fields[field].validators[validatorName],
@@ -159,19 +188,35 @@
             $parent.removeClass('has-success').addClass('has-error');
 
             $field.data('bootstrapValidator.error').html(message).show();
+
+            this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
         },
 
+        /**
+         * Remove error from given field
+         *
+         * @param {jQuery} $field The field element
+         */
         removeError: function($field) {
             delete this.invalidFields[$field.attr('name')];
             $field.parents('.form-group').removeClass('has-error').addClass('has-success');
             $field.data('bootstrapValidator.error').hide();
+            this.$form.find(this.options.submitButtons).removeAttr('disabled');
         },
 
+        /**
+         * Start remote checking
+         *
+         * @param {jQuery} $field The field element
+         * @param {String} validatorName
+         * @param {XMLHttpRequest} xhr
+         */
         startRequest: function($field, validatorName, xhr) {
             var field = $field.attr('name');
 
-            //when request start, I assigned arbitrary attribute fieldIsValid = 0
-            $field.attr('fieldIsValid',0);
+            $field.data('bootstrapValidator.isValid', false);
+            this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
+
             if(this.numPendingRequests == null){
                 this.numPendingRequests = 0;
             }
@@ -188,16 +233,19 @@
             this.xhrRequests[field][validatorName] = xhr;
         },
 
+        /**
+         * Complete remote checking
+         *
+         * @param {jQuery} $field The field element
+         * @param {String} validatorName
+         * @param {boolean} isValid
+         */
         completeRequest: function($field, validatorName, isValid) {
-            if (isValid === false ) {
+            if (isValid === false) {
                 this.showError($field, validatorName);
-            } else if (isValid === true ) {
+            } else if (isValid === true) {
                 this.removeError($field);
-
-                /* When request complete and that field is validated,
-                  I assigned arbitrary attribute fieldIsValid = 1
-                */
-                $field.attr('fieldIsValid', 1);
+                $field.data('bootstrapValidator.isValid', true);
             }
 
             var field = $field.attr('name');
@@ -207,12 +255,19 @@
             this.numPendingRequests--;
             if (this.numPendingRequests <= 0) {
                 this.numPendingRequests = 0;
-                this.$form.submit();
+                if (this.formSubmited) {
+                    this.$form.submit();
+                }
             }
         },
 
+        /**
+         * Check the form validity
+         *
+         * @returns {boolean}
+         */
         isValid: function() {
-            if (this.numPendingRequests > 0 || this.numPendingRequests == null ) {
+            if (this.numPendingRequests > 0) {
                 return false;
             }
             for (var field in this.invalidFields) {
@@ -423,9 +478,7 @@
          * @returns {string}
          */
         validate: function(validator, $field, options) {
-
-            var value = $field.val(), name = $field.attr('name');
-            var data = options.data;
+            var value = $field.val(), name = $field.attr('name'), data = options.data;
             if (data == null) {
                 data       = {};
                 data[name] = value;
@@ -437,10 +490,8 @@
                 data: data
             }).success(function(response) {
                 var isValid =  response.valid === true || response.valid === 'true';
-
                 validator.completeRequest($field, 'remote', isValid);
             });
-
             validator.startRequest($field, 'remote', xhr);
 
             return 'pending';

package.json

@@ -4,7 +4,7 @@
     "name": "Nguyen Huu Phuoc <phuoc@huuphuoc.me>",
     "url": "https://twitter.com/nghuuphuoc"
   },
-  "homepage": "http://github.com/nghuuphuoc/bootstrapvalidate",
+  "homepage": "http://github.com/nghuuphuoc/bootstrapvalidator",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-uglify": "~0.2.4",

src/css/bootstrapValidator.css

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *

src/css/bootstrapValidator.scss

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *

src/js/bootstrapValidator.js

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidator)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -16,6 +16,7 @@
         this.invalidFields      = {};
         this.xhrRequests        = {};
         this.numPendingRequests = null;
+        this.formSubmited       = false;
 
         this._init();
     };
@@ -28,6 +29,10 @@
         // Default invalid message
         message: 'This value is not valid',
 
+        // The submit buttons selector
+        // These buttons will be disabled when the form input are invalid
+        submitButtons: 'button[type="submit"]',
+
         // Map the field name with validator rules
         fields: null
     };
@@ -35,6 +40,9 @@
     BootstrapValidator.prototype = {
         constructor: BootstrapValidator,
 
+        /**
+         * Init form
+         */
         _init: function() {
             if (this.options.fields == null) {
                 return;
@@ -47,15 +55,16 @@
                     that.formSubmited = true;
                     if (that.options.fields) {
                         for (var field in that.options.fields) {
-                            if(that.numPendingRequests > 0 || that.numPendingRequests == null ){
-                                // Check that field is validated?
+                            if (that.numPendingRequests > 0 || that.numPendingRequests == null) {
+                                // Check if the field is valid
                                 var $field = that.getFieldElement(field);
-                                if( $field.attr('fieldIsValid') != 1 || $field.attr('fieldIsValid') != '1' ){
+                                if ($field.data('bootstrapValidator.isValid') !== true) {
                                     that.validateField(field);
                                 }
                             }
                         }
                         if (!that.isValid()) {
+                            that.$form.find(that.options.submitButtons).attr('disabled', 'disabled');
                             e.preventDefault();
                         }
                     }
@@ -66,6 +75,11 @@
             }
         },
 
+        /**
+         * Init field
+         *
+         * @param {String} field The field name
+         */
         _initField: function(field) {
             if (this.options.fields[field] == null || this.options.fields[field].validators == null) {
                 return;
@@ -113,15 +127,27 @@
             var type  = $field.attr('type'),
                 event = ('checkbox' == type || 'radio' == type) ? 'change' : 'keyup';
             $field.on(event, function() {
+                that.formSubmited = false;
                 that.validateField(field);
             });
         },
 
+        /**
+         * Get field element
+         *
+         * @param {String} field The field name
+         * @returns {jQuery}
+         */
         getFieldElement: function(field) {
             var fields = this.$form.find('[name="' + field + '"]');
             return (fields.length == 0) ? null : $(fields[0]);
         },
 
+        /**
+         * Validate given field
+         *
+         * @param {String} field The field name
+         */
         validateField: function(field) {
             var $field = this.getFieldElement(field);
             if (null == $field) {
@@ -131,9 +157,7 @@
             var that       = this,
                 validators = that.options.fields[field].validators;
             for (var validatorName in validators) {
-                if (!$.fn.bootstrapValidator.validators[validatorName]
-//                        || (this.xhrRequests[field] && this.xhrRequests[field][validatorName])
-                    ) {     // Do not perform if there is pending remote validation
+                if (!$.fn.bootstrapValidator.validators[validatorName]) {
                     continue;
                 }
                 var isValid = $.fn.bootstrapValidator.validators[validatorName].validate(that, $field, validators[validatorName]);
@@ -146,6 +170,12 @@
             }
         },
 
+        /**
+         * Show field error
+         *
+         * @param {jQuery} $field The field element
+         * @param {String} validatorName
+         */
         showError: function($field, validatorName) {
             var field     = $field.attr('name'),
                 validator = this.options.fields[field].validators[validatorName],
@@ -158,19 +188,35 @@
             $parent.removeClass('has-success').addClass('has-error');
 
             $field.data('bootstrapValidator.error').html(message).show();
+
+            this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
         },
 
+        /**
+         * Remove error from given field
+         *
+         * @param {jQuery} $field The field element
+         */
         removeError: function($field) {
             delete this.invalidFields[$field.attr('name')];
             $field.parents('.form-group').removeClass('has-error').addClass('has-success');
             $field.data('bootstrapValidator.error').hide();
+            this.$form.find(this.options.submitButtons).removeAttr('disabled');
         },
 
+        /**
+         * Start remote checking
+         *
+         * @param {jQuery} $field The field element
+         * @param {String} validatorName
+         * @param {XMLHttpRequest} xhr
+         */
         startRequest: function($field, validatorName, xhr) {
             var field = $field.attr('name');
 
-            //when request start, I assigned arbitrary attribute fieldIsValid = 0
-            $field.attr('fieldIsValid',0);
+            $field.data('bootstrapValidator.isValid', false);
+            this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
+
             if(this.numPendingRequests == null){
                 this.numPendingRequests = 0;
             }
@@ -187,16 +233,19 @@
             this.xhrRequests[field][validatorName] = xhr;
         },
 
+        /**
+         * Complete remote checking
+         *
+         * @param {jQuery} $field The field element
+         * @param {String} validatorName
+         * @param {boolean} isValid
+         */
         completeRequest: function($field, validatorName, isValid) {
-            if (isValid === false ) {
+            if (isValid === false) {
                 this.showError($field, validatorName);
-            } else if (isValid === true ) {
+            } else if (isValid === true) {
                 this.removeError($field);
-
-                /* When request complete and that field is validated,
-                  I assigned arbitrary attribute fieldIsValid = 1
-                */
-                $field.attr('fieldIsValid', 1);
+                $field.data('bootstrapValidator.isValid', true);
             }
 
             var field = $field.attr('name');
@@ -206,12 +255,19 @@
             this.numPendingRequests--;
             if (this.numPendingRequests <= 0) {
                 this.numPendingRequests = 0;
-                this.$form.submit();
+                if (this.formSubmited) {
+                    this.$form.submit();
+                }
             }
         },
 
+        /**
+         * Check the form validity
+         *
+         * @returns {boolean}
+         */
         isValid: function() {
-            if (this.numPendingRequests > 0 || this.numPendingRequests == null ) {
+            if (this.numPendingRequests > 0) {
                 return false;
             }
             for (var field in this.invalidFields) {

src/js/validator/remote.js

@@ -15,9 +15,7 @@
          * @returns {string}
          */
         validate: function(validator, $field, options) {
-
-            var value = $field.val(), name = $field.attr('name');
-            var data = options.data;
+            var value = $field.val(), name = $field.attr('name'), data = options.data;
             if (data == null) {
                 data       = {};
                 data[name] = value;
@@ -29,10 +27,8 @@
                 data: data
             }).success(function(response) {
                 var isValid =  response.valid === true || response.valid === 'true';
-
                 validator.completeRequest($field, 'remote', isValid);
             });
-
             validator.startRequest($field, 'remote', xhr);
 
             return 'pending';