General clean up; Rename to BootstrapValidator

CHANGELOG.md

@@ -1,4 +1,4 @@
-# BootstrapValidate Change Log
+# Change Log
 
 v0.1.0
 

Gruntfile.js

@@ -6,7 +6,7 @@ module.exports = function(grunt) {
 
         banner: [
             '/**',
-            ' * BootstrapValidate v<%= pkg.version %> (<%= pkg.homepage %>)',
+            ' * BootstrapValidator v<%= pkg.version %> (<%= pkg.homepage %>)',
             ' *',
             ' * A jQuery plugin to validate form fields. Use with Bootstrap 3',
             ' *',
@@ -31,7 +31,7 @@ module.exports = function(grunt) {
                     banner: '<%= banner %>'
                 },
                 files: {
-                    '<%= buildDir %>/css/bootstrapvalidate.min.css': ['src/css/bootstrapvalidate.css']
+                    '<%= buildDir %>/css/bootstrapValidator.min.css': ['src/css/bootstrapValidator.css']
                 }
             }
         },
@@ -43,8 +43,8 @@ module.exports = function(grunt) {
                 banner: '<%= banner %>'
             },
             dist: {
-                src: ['src/js/bootstrapvalidate.js', 'src/js/validator/*.js'],
-                dest: '<%= buildDir %>/js/bootstrapvalidate.js'
+                src: ['src/js/bootstrapValidator.js', 'src/js/validator/*.js'],
+                dest: '<%= buildDir %>/js/bootstrapValidator.js'
             }
         },
 
@@ -53,8 +53,8 @@ module.exports = function(grunt) {
                 banner: '<%= banner %>'
             },
             build: {
-                src: ['<%= buildDir %>/js/bootstrapvalidate.js'],
-                dest: '<%= buildDir %>/js/bootstrapvalidate.min.js'
+                src: ['<%= buildDir %>/js/bootstrapValidator.js'],
+                dest: '<%= buildDir %>/js/bootstrapValidator.min.js'
             }
         },
 

README.md

@@ -1,4 +1,4 @@
-# BootstrapValidate
+# bootstrapValidator
 
 A jQuery plugin to validate form fields. Use with Bootstrap 3
 
@@ -20,28 +20,28 @@ You can see the live demo here:
 
 ## Usage
 
-Since the BootstrapValidate plugin requires jQuery and Bootstrap 3, you have to include the required CSS and JS files to your page:
+Since the bootstrapValidator plugin requires jQuery and Bootstrap 3, you have to include the required CSS and JS files to your page:
 
 ```html
 <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
-<link rel="stylesheet" href="/path/to/bootstrapvalidate.min.css"/>
+<link rel="stylesheet" href="/path/to/bootstrapValidator.min.css"/>
 
 <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="/path/to/bootstrapvalidate.min.js"></script>
+<script type="text/javascript" src="/path/to/bootstrapValidator.min.js"></script>
 ```
 
 Call the plugin to validate the form as following:
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         message: <The default error message for all fields>,
         fields: {
             ...
             <fieldName>: {
                 message: <The default error message for this field>,
-                validator: {
+                validators: {
                     ...
                     <validatorName>: <validatorOptions>
                     ...
@@ -79,10 +79,10 @@ usZipCode                               | Validate a US zip code
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     between: {
                         message: ...,   // [required] The error message
                         min: ...        // [required] The lower value in the range
@@ -100,10 +100,10 @@ $(document).ready(function() {
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     greaterThan: {
                         message: ...,   // [required] The error message
                         value: ...,     // [required] The number used to compare to
@@ -122,10 +122,10 @@ $(document).ready(function() {
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     identical: {
                         message: ...,   // [required] The error message
                         field: ...      // [required] The name of field that will be used to compare with current one
@@ -141,10 +141,10 @@ $(document).ready(function() {
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     lessThan: {
                         message: ...,   // [required] The error message
                         value: ...,     // [required] The number used to compare to
@@ -161,10 +161,10 @@ $(document).ready(function() {
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     regexp: {
                         message: ...,   // [required] The error message
                         regexp: ...     // [required] The regular expression
@@ -180,10 +180,10 @@ $(document).ready(function() {
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     remote: {
                         message: ...,   // [required] The error message
                         url: ...,       // [required] The remote URL
@@ -200,10 +200,10 @@ $(document).ready(function() {
 
 ```javascript
 $(document).ready(function() {
-    $(<form Selector>).bootstrapValidate({
+    $(<form Selector>).bootstrapValidator({
         fields: {
             <fieldName>: {
-                validator: {
+                validators: {
                     stringLength: {
                         message: ...,   // [required] The error message
                         // One of two min/max options must be defined
@@ -219,9 +219,9 @@ $(document).ready(function() {
 
 ## Build
 
-BootstrapValidate uses [grunt](http://gruntjs.com) to simplify building process.
+BootstrapValidator uses [grunt](http://gruntjs.com) to simplify building process.
 
-From the BootstrapValidate root directory, execute the following commands to install the dependent packages (the administrator permission might be required):
+From the BootstrapValidator root directory, execute the following commands to install the dependent packages (the administrator permission might be required):
 
 ```bash
 $ npm install grunt --save-dev
@@ -258,4 +258,4 @@ Nguyen Huu Phuoc ([Email](mailto: phuoc@huuphuoc.me) / [Twitter](http://twitter.
 
 Copyright (c) 2013 Nguyen Huu Phuoc
 
-BootstrapValidate is licensed under the MIT license.
+bootstrapValidator is licensed under the MIT license.

demo/index.html

@@ -1,17 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Bootstrap Validate demo</title>
+    <title>BootstrapValidator demo</title>
 
     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
-    <!--[if IE 7]>
-    <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome-ie7.min.css">
-    <![endif]-->
-    <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css"/>
+    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
 
     <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="../dist/js/bootstrapvalidate.js"></script>
+    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
 </head>
 <body>
     <div class="container">
@@ -66,12 +63,12 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $('#defaultForm').bootstrapValidate({
+    $('#defaultForm').bootstrapValidator({
         message: 'This value is not valid',
         fields: {
             username: {
                 message: 'The username is not valid',
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The username is required and can\'t be empty'
                     },
@@ -87,7 +84,7 @@ $(document).ready(function() {
                 }
             },
             email: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The email address is required and can\'t be empty'
                     },
@@ -97,7 +94,7 @@ $(document).ready(function() {
                 }
             },
             password: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The password is required and can\'t be empty'
                     },
@@ -108,7 +105,7 @@ $(document).ready(function() {
                 }
             },
             confirmPassword: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The confirm password is required and can\'t be empty'
                     },

demo/remote.html

@@ -1,19 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Bootstrap Validate demo</title>
+    <title>BootstrapValidator demo</title>
 
     <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.css"/>
-    <!--[if IE 7]>
-    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome-ie7.min.css">
-    <![endif]-->
-    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css"/>
-
-    <link rel="stylesheet" href="/dist/css/bootstrapvalidate.css"/>
+    <link rel="stylesheet" href="/dist/css/bootstrapValidator.css"/>
 
     <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="/dist/js/bootstrapvalidate.js"></script>
+    <script type="text/javascript" src="/dist/js/bootstrapValidator.js"></script>
 </head>
 <body>
     <div class="container">
@@ -21,28 +16,24 @@
             <!-- form: -->
             <section>
                 <div class="page-header">
-                    <h1>Bootstrap Validate plugin</h1>
+                    <h1>Sign up</h1>
                 </div>
 
                 <div class="col-lg-8 col-lg-offset-2">
                     <form id="defaultForm" method="post" action="remote.html" class="form-horizontal">
-                        <fieldset>
-                            <legend>Remote validator</legend>
-
-                            <div class="form-group">
-                                <label class="col-lg-3 control-label">Username</label>
-                                <div class="col-lg-5">
-                                    <input type="text" class="form-control" name="username" />
-                                </div>
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">Username</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="username" autocomplete="off" />
                             </div>
+                        </div>
 
-                            <div class="form-group">
-                                <label class="col-lg-3 control-label">Email address</label>
-                                <div class="col-lg-5">
-                                    <input type="text" class="form-control" name="email" />
-                                </div>
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">Email address</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="email" autocomplete="off" />
                             </div>
-                        </fieldset>
+                        </div>
 
                         <div class="form-group">
                             <div class="col-lg-9 col-lg-offset-3">
@@ -58,12 +49,12 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $('#defaultForm').bootstrapValidate({
+    $('#defaultForm').bootstrapValidator({
         message: 'This value is not valid',
         fields: {
             username: {
                 message: 'The username is not valid',
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The username is required and can\'t be empty'
                     },
@@ -74,7 +65,7 @@ $(document).ready(function() {
                 }
             },
             email: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The email address is required and can\'t be empty'
                     },

demo/remote.php

@@ -4,7 +4,7 @@
 // and open the remote.html file:
 // http://domain.com/demo/remote.html
 
-//sleep(5);
+sleep(5);
 
 $valid = true;
 

demo/validators.html

@@ -1,18 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Bootstrap Validate demo</title>
+    <title>BootstrapValidator demo</title>
 
     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
-    <!--[if IE 7]>
-    <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome-ie7.min.css">
-    <![endif]-->
-    <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css"/>
-    <link rel="stylesheet" href="../dist/css/bootstrapvalidate.css"/>
+    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
 
     <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="../dist/js/bootstrapvalidate.js"></script>
+    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
 </head>
 <body>
     <div class="container">
@@ -126,12 +122,12 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $('#defaultForm').bootstrapValidate({
+    $('#defaultForm').bootstrapValidator({
         message: 'This value is not valid',
         fields: {
             username: {
                 message: 'The username is not valid',
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The username is required and can\'t be empty'
                     },
@@ -147,14 +143,14 @@ $(document).ready(function() {
                 }
             },
             acceptTerms: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'You have to accept the terms and policies'
                     }
                 }
             },
             email: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The email address is required and can\'t be empty'
                     },
@@ -164,35 +160,35 @@ $(document).ready(function() {
                 }
             },
             website: {
-                validator: {
+                validators: {
                     uri: {
                         message: 'The input is not a valid URL'
                     }
                 }
             },
             phoneNumber: {
-                validator: {
+                validators: {
                     digits: {
                         message: 'The value can contain only digits'
                     }
                 }
             },
             color: {
-                validator: {
+                validators: {
                     hexColor: {
                         message: 'The input is not a valid hex color'
                     }
                 }
             },
             zipCode: {
-                validator: {
+                validators: {
                     usZipCode: {
                         message: 'The input is not a valid US zip code'
                     }
                 }
             },
             password: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The password is required and can\'t be empty'
                     },
@@ -203,7 +199,7 @@ $(document).ready(function() {
                 }
             },
             confirmPassword: {
-                validator: {
+                validators: {
                     notEmpty: {
                         message: 'The confirm password is required and can\'t be empty'
                     },
@@ -214,7 +210,7 @@ $(document).ready(function() {
                 }
             },
             ages: {
-                validator: {
+                validators: {
                     lessThan: {
                         value: 100,
                         inclusive: true,

dist/css/bootstrapvalidate.css

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidate (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -7,5 +7,5 @@
  * @copyright   (c) 2013 Nguyen Huu Phuoc
  * @license     MIT
  */
-.bootstrap-validate-form .help-block {
+.bootstrap-validator-form .help-block {
   margin-bottom: 0; }

dist/css/bootstrapvalidate.min.css

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidate v0.1.0 (http://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator v0.1.0 (http://github.com/nghuuphuoc/bootstrapvalidate)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -9,4 +9,4 @@
  */
 
 
-.bootstrap-validate-form .help-block{margin-bottom:0}
+.bootstrap-validator-form .help-block{margin-bottom:0}

src/css/bootstrapvalidate.scss

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidate (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -8,7 +8,7 @@
  * @license     MIT
  */
 
-.bootstrap-validate-form {
+.bootstrap-validator-form {
   .help-block {
     margin-bottom: 0;
   }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bootstrapvalidate",
+  "name": "bootstrapValidator",
   "author": {
     "name": "Nguyen Huu Phuoc <phuoc@huuphuoc.me>",
     "url": "https://twitter.com/nghuuphuoc"

src/css/bootstrapvalidate.css

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidate (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -7,5 +7,5 @@
  * @copyright   (c) 2013 Nguyen Huu Phuoc
  * @license     MIT
  */
-.bootstrap-validate-form .help-block {
+.bootstrap-validator-form .help-block {
   margin-bottom: 0; }

dist/css/bootstrapvalidate.scss

@@ -1,5 +1,5 @@
 /**
- * BootstrapValidate (https://github.com/nghuuphuoc/bootstrapvalidate)
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
  *
  * A jQuery plugin to validate form fields. Use with Bootstrap 3
  *
@@ -8,7 +8,7 @@
  * @license     MIT
  */
 
-.bootstrap-validate-form {
+.bootstrap-validator-form {
   .help-block {
     margin-bottom: 0;
   }

src/js/bootstrapValidator.js

@@ -0,0 +1,214 @@
+/**
+ * BootstrapValidator (https://github.com/nghuuphuoc/bootstrapvalidate)
+ *
+ * A jQuery plugin to validate form fields. Use with Bootstrap 3
+ *
+ * @author      Nguyen Huu Phuoc <phuoc@huuphuoc.me>
+ * @copyright   (c) 2013 Nguyen Huu Phuoc
+ * @license     MIT
+ */
+
+(function($) {
+    var BootstrapValidator = function(form, options) {
+        this.$form   = $(form);
+        this.options = $.extend({}, BootstrapValidator.DEFAULT_OPTIONS, options);
+
+        this.invalidFields      = {};
+        this.xhrRequests        = {};
+        this.numPendingRequests = 0;
+
+        this._init();
+    };
+
+    // The default options
+    BootstrapValidator.DEFAULT_OPTIONS = {
+        // The form CSS class
+        elementClass: 'bootstrap-validator-form',
+
+        // Default invalid message
+        message: 'This value is not valid',
+
+        // Map the field name with validator rules
+        fields: null
+    };
+
+    BootstrapValidator.prototype = {
+        constructor: BootstrapValidator,
+
+        _init: function() {
+            if (this.options.fields == null) {
+                return;
+            }
+
+            var that = this;
+            this.$form
+                .addClass(this.options.elementClass)
+                .on('submit', function(e) {
+                    that.formSubmited = true;
+                    if (that.options.fields) {
+                        for (var field in that.options.fields) {
+                            that.validateField(field);
+                        }
+                        if (!that.isValid()) {
+                            e.preventDefault();
+                        }
+                    }
+                });
+
+            for (var field in this.options.fields) {
+                this._initField(field);
+            }
+        },
+
+        _initField: function(field) {
+            if (this.options.fields[field] == null || this.options.fields[field].validators == null) {
+                return;
+            }
+
+            var $field = this.getFieldElement(field);
+            if (null == $field) {
+                return;
+            }
+
+            // Create a help block element for showing the error
+            var that      = this,
+                $parent   = $field.parents('.form-group'),
+                helpBlock = $parent.find('.help-block');
+
+            if (helpBlock.length == 0) {
+                var $small = $('<small/>').addClass('help-block').appendTo($parent);
+                $field.data('bootstrapValidator.error', $small);
+
+                // Calculate the number of columns of the label/field element
+                // Then set offset to the help block element
+                var label, cssClasses, offset;
+                if (label = $parent.find('label').get(0)) {
+                    cssClasses = $(label).attr('class').split(' ');
+                    for (var i = 0; i < cssClasses.length; i++) {
+                        if (cssClasses[i].substr(0, 7) == 'col-lg-') {
+                            offset = cssClasses[i].substr(7);
+                            break;
+                        }
+                    }
+                } else {
+                    cssClasses = $parent.children().eq(0).attr('class').split(' ');
+                    for (var i = 0; i < cssClasses.length; i++) {
+                        if (cssClasses[i].substr(0, 14) == 'col-lg-offset-') {
+                            offset = cssClasses[i].substr(14);
+                            break;
+                        }
+                    }
+                }
+                $small.addClass('col-lg-offset-' + offset).addClass('col-lg-' + parseInt(12 - offset));
+            } else {
+                $field.data('bootstrapValidator.error', helpBlock.eq(0));
+            }
+
+            var type  = $field.attr('type'),
+                event = ('checkbox' == type || 'radio' == type) ? 'change' : 'keyup';
+            $field.on(event, function() {
+                that.validateField(field);
+            });
+        },
+
+        getFieldElement: function(field) {
+            var fields = this.$form.find('[name="' + field + '"]');
+            return (fields.length == 0) ? null : $(fields[0]);
+        },
+
+        validateField: function(field) {
+            var $field = this.getFieldElement(field);
+            if (null == $field) {
+                // Return if cannot find the field with given name
+                return;
+            }
+            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
+                    continue;
+                }
+                var isValid = $.fn.bootstrapValidator.validators[validatorName].validate(that, $field, validators[validatorName]);
+                if (isValid === false) {
+                    that.showError($field, validatorName);
+                    break;
+                } else if (isValid === true) {
+                    that.removeError($field);
+                }
+            }
+        },
+
+        showError: function($field, validatorName) {
+            var field     = $field.attr('name'),
+                validator = this.options.fields[field].validators[validatorName],
+                message   = validator.message || this.options.message,
+                $parent   = $field.parents('.form-group');
+
+            this.invalidFields[field] = true;
+
+            // Add has-error class to parent element
+            $parent.removeClass('has-success').addClass('has-error');
+
+            $field.data('bootstrapValidator.error').html(message).show();
+        },
+
+        removeError: function($field) {
+            delete this.invalidFields[$field.attr('name')];
+            $field.parents('.form-group').removeClass('has-error').addClass('has-success');
+            $field.data('bootstrapValidator.error').hide();
+        },
+
+        startRequest: function($field, validatorName, xhr) {
+            var field = $field.attr('name');
+            this.numPendingRequests++;
+            // Abort the previous request
+            if (!this.xhrRequests[field]) {
+                this.xhrRequests[field] = {};
+            }
+
+            if (this.xhrRequests[field][validatorName]) {
+                this.xhrRequests[field][validatorName].abort();
+            }
+            this.xhrRequests[field][validatorName] = xhr;
+        },
+
+        completeRequest: function($field, validatorName, isValid) {
+            var field = $field.attr('name');
+
+            this.numPendingRequests--;
+            if (this.numPendingRequests < 0) {
+                this.numPendingRequests = 0;
+            }
+            delete this.xhrRequests[field][validatorName];
+        },
+
+        isValid: function() {
+            if (this.numPendingRequests > 0) {
+                return false;
+            }
+            for (var field in this.invalidFields) {
+                if (this.invalidFields[field]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+    };
+
+    // Plugin definition
+    $.fn.bootstrapValidator = function(options) {
+        return this.each(function() {
+            var $this = $(this), data = $this.data('bootstrapValidator');
+            if (!data) {
+                $this.data('bootstrapValidator', (data = new BootstrapValidator(this, options)));
+            }
+        });
+    };
+
+    // Available validators
+    $.fn.bootstrapValidator.validators = {};
+
+    $.fn.bootstrapValidator.Constructor = BootstrapValidator;
+}(window.jQuery));

src/js/bootstrapvalidate.js

@@ -1,220 +0,0 @@
-/**
- * BootstrapValidate (https://github.com/nghuuphuoc/bootstrapvalidate)
- *
- * A jQuery plugin to validate form fields. Use with Bootstrap 3
- *
- * @author      Nguyen Huu Phuoc <phuoc@huuphuoc.me>
- * @copyright   (c) 2013 Nguyen Huu Phuoc
- * @license     MIT
- */
-
-(function($) {
-    // Plugin definition
-    $.fn.bootstrapValidate = function(options) {
-        return this.each(function() {
-            var $this = $(this), data = $this.data('bootstrapValidate');
-            if (!data) {
-                $this.data('bootstrapValidate', (data = new $.bootstrapValidator(this, options)));
-            }
-        });
-    };
-
-    $.bootstrapValidator = function(form, options) {
-        this.$form   = $(form);
-        this.options = $.extend({}, $.bootstrapValidator.DEFAULT_OPTIONS, options);
-
-        this.invalidFields      = {};
-        this.xhrRequests        = {};
-        this.numPendingRequests = 0;
-
-        this.init();
-    };
-
-    $.extend($.bootstrapValidator, {
-        /**
-         * The default options
-         */
-        DEFAULT_OPTIONS: {
-            // Default invalid message
-            message: 'This value is not valid',
-
-            // Map the field name with validator rules
-            fields: null
-        },
-
-        // Available validators
-        validator: {},
-
-        prototype: {
-            /**
-             * Retrieve the form element
-             * @returns {jQuery}
-             */
-            getForm: function() {
-                return this.$form;
-            },
-
-            /**
-             * Validate form
-             */
-            init: function() {
-                if (this.options.fields == null) {
-                    return;
-                }
-
-                var that = this;
-                this.$form
-                    .addClass('bootstrap-validate-form')
-                    .on('submit', function(e) {
-                        if (that.options.fields) {
-                            for (var field in that.options.fields) {
-                                that.validateField(field);
-                            }
-                            if (!that.isValid()) {
-                                e.preventDefault();
-                            }
-                        }
-                    });
-
-                for (var field in this.options.fields) {
-                    this.initField(field);
-                }
-            },
-
-            initField: function(field) {
-                if (this.options.fields[field] == null || this.options.fields[field].validator == null) {
-                    return;
-                }
-                var foundFields = this.$form.find('[name="' + field + '"]');
-                if (foundFields.length == 0) {
-                    // Return if cannot find the field with given name
-                    return;
-                }
-
-                // Create a help block element for showing the error
-                var that      = this,
-                    $field    = $(foundFields[0]),
-                    $parent   = $field.parents('.form-group'),
-                    helpBlock = $parent.find('.help-block');
-
-                if (helpBlock.length == 0) {
-                    var $small = $('<small/>').addClass('help-block').appendTo($parent);
-                    $field.data('bootstrapValidator.error', $small);
-
-                    // Calculate the number of columns of the label/field element
-                    // Then set offset to the help block element
-                    var label, cssClasses, offset;
-                    if (label = $parent.find('label').get(0)) {
-                        cssClasses = $(label).attr('class').split(' ');
-                        for (var i = 0; i < cssClasses.length; i++) {
-                            if (cssClasses[i].substr(0, 7) == 'col-lg-') {
-                                offset = cssClasses[i].substr(7);
-                                break;
-                            }
-                        }
-                    } else {
-                        cssClasses = $parent.children().eq(0).attr('class').split(' ');
-                        for (var i = 0; i < cssClasses.length; i++) {
-                            if (cssClasses[i].substr(0, 14) == 'col-lg-offset-') {
-                                offset = cssClasses[i].substr(14);
-                                break;
-                            }
-                        }
-                    }
-                    $small.addClass('col-lg-offset-' + offset).addClass('col-lg-' + parseInt(12 - offset));
-                } else {
-                    $field.data('bootstrapValidator.error', helpBlock.eq(0));
-                }
-
-                var type  = $field.attr('type'),
-                    event = ('checkbox' == type || 'radio' == type) ? 'change' : 'keyup';
-                $field.on(event, function() {
-                    that.validateField(field);
-                });
-            },
-
-            validateField: function(field) {
-                var foundFields = this.$form.find('[name="' + field + '"]');
-                if (foundFields.length == 0) {
-                    // Return if cannot find the field with given name
-                    return;
-                }
-                var that       = this,
-                    $field     = $(foundFields[0]),
-                    validators = that.options.fields[field].validator;
-                for (var validatorName in validators) {
-                    if (!$.bootstrapValidator.validator[validatorName]) {
-                        continue;
-                    }
-                    var isValid = $.bootstrapValidator.validator[validatorName].validate(that, $field, validators[validatorName]);
-                    if (isValid === false) {
-                        that.showError($field, validatorName);
-                        break;
-                    } else if (isValid === true) {
-                        that.removeError($field);
-                    }
-                }
-            },
-
-            showError: function($field, validatorName) {
-                var field     = $field.attr('name'),
-                    validator = this.options.fields[field].validator[validatorName],
-                    message   = validator.message || this.options.message,
-                    $parent   = $field.parents('.form-group');
-
-                this.invalidFields[field] = true;
-
-                // Add has-error class to parent element
-                $parent.removeClass('has-success').addClass('has-error');
-
-                $field.data('bootstrapValidator.error').html(message).show();
-            },
-
-            removeError: function($field) {
-                this.invalidFields[$field.attr('name')] = false;
-                $field.parents('.form-group').removeClass('has-error').addClass('has-success');
-                $field.data('bootstrapValidator.error').hide();
-            },
-
-            startRequest: function($field, validatorName, xhr) {
-                var field = $field.attr('name');
-
-                this.completeRequest($field, validatorName);
-
-                if (this.numPendingRequests < 0) {
-                    this.numPendingRequests = 0;
-                }
-                this.numPendingRequests++;
-                if (!this.xhrRequests[field]) {
-                    this.xhrRequests[field] = {};
-                }
-                this.xhrRequests[field][validatorName] = xhr;
-            },
-
-            completeRequest: function($field, validatorName) {
-                var field = $field.attr('name');
-                if (!this.xhrRequests[field] || !this.xhrRequests[field][validatorName]) {
-                    return;
-                }
-
-                this.numPendingRequests--;
-                var xhr = this.xhrRequests[field][validatorName];
-                xhr.abort();
-                delete this.xhrRequests[field][validatorName];
-            },
-
-            isValid: function() {
-                console.log(this.numPendingRequests);
-                if (this.numPendingRequests > 0) {
-                    return false;
-                }
-                for (var field in this.invalidFields) {
-                    if (this.invalidFields[field]) {
-                        return false;
-                    }
-                }
-                return true;
-            }
-        }
-    });
-}(window.jQuery));

src/js/validator/between.js

@@ -1,24 +1,22 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        between: {
-            /**
-             * Return true if the input value is between (strictly or not) two given numbers
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Can consist of the following keys:
-             * - min
-             * - max
-             * - inclusive [optional]: Can be true or false. Default is true
-             * - message: The invalid message
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = parseFloat($field.val());
-                return (options.inclusive === true)
-                            ? (value > options.min && value < options.max)
-                            : (value >= options.min && value <= options.max);
-            }
+    $.fn.bootstrapValidator.validators.between = {
+        /**
+         * Return true if the input value is between (strictly or not) two given numbers
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - min
+         * - max
+         * - inclusive [optional]: Can be true or false. Default is true
+         * - message: The invalid message
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = parseFloat($field.val());
+            return (options.inclusive === true)
+                        ? (value > options.min && value < options.max)
+                        : (value >= options.min && value <= options.max);
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/digits.js

@@ -1,17 +1,15 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        digits: {
-            /**
-             * Return true if the input value contains digits only
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                return /^\d+$/.test($field.val());
-            }
+    $.fn.bootstrapValidator.validators.digits = {
+        /**
+         * Return true if the input value contains digits only
+         *
+         * @param {BootstrapValidator} validator Validate plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            return /^\d+$/.test($field.val());
         }
-    });
+    }
 }(window.jQuery));

src/js/validator/emailAddress.js

@@ -1,21 +1,19 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        emailAddress: {
-            /**
-             * Return true if and only if the input value is a valid email address
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value       = $.trim($field.val()),
-                    // Email address regular expression
-                    // http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
-                    emailRegExp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-                return emailRegExp.test(value);
-            }
+    $.fn.bootstrapValidator.validators.emailAddress = {
+        /**
+         * Return true if and only if the input value is a valid email address
+         *
+         * @param {BootstrapValidator} validator Validate plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val(),
+                // Email address regular expression
+                // http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
+                emailRegExp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+            return emailRegExp.test(value);
         }
-    });
+    }
 }(window.jQuery));

src/js/validator/greaterThan.js

@@ -1,21 +1,19 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        greaterThan: {
-            /**
-             * Return true if the input value is greater than or equals to given number
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Can consist of the following keys:
-             * - value: The number used to compare to
-             * - inclusive [optional]: Can be true or false. Default is true
-             * - message: The invalid message
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = parseFloat($field.val());
-                return (options.inclusive === true) ? (value > options.value) : (value >= options.value);
-            }
+    $.fn.bootstrapValidator.validators.greaterThan = {
+        /**
+         * Return true if the input value is greater than or equals to given number
+         *
+         * @param {BootstrapValidator} validator Validate plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - value: The number used to compare to
+         * - inclusive [optional]: Can be true or false. Default is true
+         * - message: The invalid message
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = parseFloat($field.val());
+            return (options.inclusive === true) ? (value > options.value) : (value >= options.value);
         }
-    });
+    }
 }(window.jQuery));

src/js/validator/hexColor.js

@@ -1,19 +1,17 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        hexColor: {
-            /**
-             * Return true if the input value is a valid hex color
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Can consist of the following keys:
-             * - message: The invalid message
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = $field.val();
-                return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
-            }
+    $.fn.bootstrapValidator.validators.hexColor = {
+        /**
+         * Return true if the input value is a valid hex color
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - message: The invalid message
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val();
+            return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/identical.js

@@ -1,25 +1,23 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        identical: {
-            /**
-             * Check if input value equals to value of particular one
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field 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, $field, options) {
-                var value        = $field.val(),
-                    $compareWith = validateInstance.getForm().find('[name="' + options.field + '"]');
-                if (value == $compareWith.val()) {
-                    validateInstance.removeError($compareWith);
-                    return true;
-                } else {
-                    return false;
-                }
+    $.fn.bootstrapValidator.validators.identical = {
+        /**
+         * Check if input value equals to value of particular one
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field 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(validator, $field, options) {
+            var value        = $field.val(),
+                $compareWith = validator.getFieldElement(options.field);
+            if ($compareWith && value == $compareWith.val()) {
+                validator.removeError($compareWith);
+                return true;
+            } else {
+                return false;
             }
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/lessThan.js

@@ -1,21 +1,19 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        lessThan: {
-            /**
-             * Return true if the input value is less than or equal to given number
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Can consist of the following keys:
-             * - value: The number used to compare to
-             * - inclusive [optional]: Can be true or false. Default is true
-             * - message: The invalid message
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = parseFloat($field.val());
-                return (options.inclusive === true) ? (value < options.value) : (value <= options.value);
-            }
+    $.fn.bootstrapValidator.validators.lessThan = {
+        /**
+         * Return true if the input value is less than or equal to given number
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - value: The number used to compare to
+         * - inclusive [optional]: Can be true or false. Default is true
+         * - message: The invalid message
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = parseFloat($field.val());
+            return (options.inclusive === true) ? (value < options.value) : (value <= options.value);
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/notEmpty.js

@@ -1,18 +1,16 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        notEmpty: {
-            /**
-             * Check if input value is empty or not
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var type = $field.attr('type');
-                return ('checkbox' == type || 'radio' == type) ? $field.is(':checked') : ($.trim($field.val()) != '');
-            }
+    $.fn.bootstrapValidator.validators.notEmpty = {
+        /**
+         * Check if input value is empty or not
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var type = $field.attr('type');
+            return ('checkbox' == type || 'radio' == type) ? $field.is(':checked') : ($.trim($field.val()) != '');
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/regexp.js

@@ -1,19 +1,17 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        regexp: {
-            /**
-             * Check if the element value matches given regular expression
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Consists of the following key:
-             * - regexp: The regular expression you need to check
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = $.trim($field.val());
-                return value.match(options.regexp);
-            }
+    $.fn.bootstrapValidator.validators.regexp = {
+        /**
+         * Check if the element value matches given regular expression
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Consists of the following key:
+         * - regexp: The regular expression you need to check
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val();
+            return value.match(options.regexp);
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/remote.js

@@ -1,42 +1,41 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        remote: {
-            /**
-             * Request a remote server to check the input value
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Can consist of the following keys:
-             * - url
-             * - data [optional]: By default, it will take the value
-             *  {
-             *      <fieldName>: <fieldValue>
-             *  }
-             * - message: The invalid message
-             * @returns {string}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = $field.val(), name = $field.attr('name');
-                var data = options.data;
-                if (data == null) {
-                    data       = {};
-                    data[name] = value;
+    $.fn.bootstrapValidator.validators.remote = {
+        /**
+         * Request a remote server to check the input value
+         *
+         * @param {BootstrapValidator} validator Plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - url
+         * - data [optional]: By default, it will take the value
+         *  {
+         *      <fieldName>: <fieldValue>
+         *  }
+         * - message: The invalid message
+         * @returns {string}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val(), name = $field.attr('name');
+            var data = options.data;
+            if (data == null) {
+                data       = {};
+                data[name] = value;
+            }
+            var xhr = $.ajax({
+                type: 'POST',
+                url: options.url,
+                dataType: 'json',
+                data: data
+            }).success(function(response) {
+                var isValid =  response.valid === true || response.valid === 'true';
+                if (!isValid) {
+                    validator.showError($field, 'remote');
                 }
-                var xhr = $.ajax({
-                    type: 'POST',
-                    url: options.url,
-                    dataType: 'json',
-                    data: data
-                }).success(function(response) {
-                    validateInstance.completeRequest($field, 'remote');
-                    if (response.valid === false || response.valid === 'false') {
-                        validateInstance.showError($field, 'remote');
-                    }
-                });
-                validateInstance.startRequest($field, 'remote', xhr);
+                validator.completeRequest($field, 'remote', isValid);
+            });
+            validator.startRequest($field, 'remote', xhr);
 
-                return 'pending';
-            }
+            return 'pending';
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/stringLength.js

@@ -1,25 +1,23 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        stringLength: {
-            /**
-             * Check if the length of element value is less or more than given number
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options Consists of following keys:
-             * - min
-             * - max
-             * At least one of two keys is required
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = $.trim($field.val()), length = value.length;
-                if ((options.min && length < options.min) || (options.max && length > options.max)) {
-                    return false;
-                }
-
-                return true;
+    $.fn.bootstrapValidator.validators.stringLength = {
+        /**
+         * Check if the length of element value is less or more than given number
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Consists of following keys:
+         * - min
+         * - max
+         * At least one of two keys is required
+         * @returns {boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $.trim($field.val()), length = value.length;
+            if ((options.min && length < options.min) || (options.max && length > options.max)) {
+                return false;
             }
+
+            return true;
         }
-    });
+    };
 }(window.jQuery));

src/js/validator/usZipCode.js

@@ -1,18 +1,16 @@
 (function($) {
-    $.extend($.bootstrapValidator.validator, {
-        usZipCode: {
-            /**
-             * Return true if and only if the input value is a valid US zip code
-             *
-             * @param {bootstrapValidator} validateInstance Validate plugin instance
-             * @param {jQuery} $field Field element
-             * @param {Object} options
-             * @returns {boolean}
-             */
-            validate: function(validateInstance, $field, options) {
-                var value = $field.val();
-                return /^\d{5}([\-]\d{4})?$/.test(value);
-            }
+    $.fn.bootstrapValidator.validators.usZipCode = {
+        /**
+         * Return true if and only if the input value is a valid US zip code
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options
+         * @returns {boolean}
+         */
+        validate: function(validateInstance, $field, options) {
+            var value = $field.val();
+            return /^\d{5}([\-]\d{4})?$/.test(value);
         }
-    });
+    };
 }(window.jQuery));