#249: Add delay option to the remote validator, thanks to @q-state

CHANGELOG.md

@@ -7,6 +7,7 @@ __New Features__
 * [#617](https://github.com/nghuuphuoc/bootstrapvalidator/issues/617): Add ```init``` and ```destroy``` methods to validator
 
 __Improvements__
+* [#249](https://github.com/nghuuphuoc/bootstrapvalidator/pull/249): Add ```delay``` option to the [remote](http://bootstrapvalidator.com/validators/remote/) validator, thanks to [@q-state](https://github.com/q-state)
 * [#345](https://github.com/nghuuphuoc/bootstrapvalidator/issues/345), [#454](https://github.com/nghuuphuoc/bootstrapvalidator/pull/454): The [different](http://bootstrapvalidator.com/validators/different/) validator allows more than a 2-way comparison, thanks to [@AlaskanShade](https://github.com/AlaskanShade)
 * [#557](https://github.com/nghuuphuoc/bootstrapvalidator/issues/557), [#569](https://github.com/nghuuphuoc/bootstrapvalidator/pull/569): The [container](http://bootstrapvalidator.com/settings/#form-container) option can be defined by a callback, thanks to [@mattrick](https://github.com/mattrick)
 * [#675](https://github.com/nghuuphuoc/bootstrapvalidator/pull/675): The [emailAddress](http://bootstrapvalidator.com/validators/emailAddress/) validator accepts multiple email addresses, thanks to [@kenny-evitt](https://github.com/kenny-evitt)

CONTRIBUTORS.md

@@ -57,6 +57,7 @@ I would like to give big thanks to the following contributors:
 * [@patmoore](https://github.com/patmoore)
 * [@phillprice](https://github.com/phillprice)
 * [@pRieStaKos](https://github.com/pRieStaKos)
+* [@q-state](https://github.com/q-state)
 * [@roryprimrose](https://github.com/roryprimrose)
 * [@ryan2049](https://github.com/ryan2049)
 * [@smeagol74](https://github.com/smeagol74)

demo/remote.html

@@ -31,7 +31,14 @@
                         <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" />
+                                <input type="text" class="form-control" name="email[]" autocomplete="off" />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-lg-3 control-label">Other email address</label>
+                            <div class="col-lg-5">
+                                <input type="text" class="form-control" name="email[]" autocomplete="off" />
                             </div>
                         </div>
 
@@ -111,7 +118,7 @@ $(document).ready(function() {
                     remote: {
                         url: 'remote.php',
                         message: 'The username is not available',
-                        debounceDelay: 1000
+                        delay: 1000
                     },
                     different: {
                         field: 'password',
@@ -119,7 +126,7 @@ $(document).ready(function() {
                     }
                 }
             },
-            email: {
+            'email[]': {
                 validators: {
                     notEmpty: {
                         message: 'The email address is required and can\'t be empty'
@@ -130,7 +137,7 @@ $(document).ready(function() {
                     remote: {
                         url: 'remote.php',
                         message: 'The email is not available',
-                        debounceDelay: 1000
+                        delay: 2000
                     }
                 }
             },

demo/remote.php

@@ -19,7 +19,7 @@ $users = array(
 if (isset($_POST['username']) && array_key_exists($_POST['username'], $users)) {
     $valid = false;
 } else if (isset($_POST['email'])) {
-    $email = $_POST['email'];
+    $email = $_POST['email'][0];
     foreach ($users as $k => $v) {
         if ($email == $v) {
             $valid = false;

dist/css/bootstrapValidator.min.css

@@ -2,7 +2,7 @@
  * BootstrapValidator (http://bootstrapvalidator.com)
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
  *
- * @version     v0.5.2-dev, built on 2014-08-25 12:41:21 PM
+ * @version     v0.5.2-dev, built on 2014-08-27 11:42:29 AM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT

dist/js/bootstrapValidator.js

@@ -2,7 +2,7 @@
  * BootstrapValidator (http://bootstrapvalidator.com)
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
  *
- * @version     v0.5.2-dev, built on 2014-08-25 12:41:21 PM
+ * @version     v0.5.2-dev, built on 2014-08-27 11:42:29 AM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -4888,7 +4888,18 @@
             message: 'message',
             name: 'name',
             type: 'type',
-            url: 'url'
+            url: 'url',
+            delay: 'delay'
+        },
+
+        /**
+         * Destroy the timer when destroying the bootstrapValidator (using validator.destroy() method)
+         */
+        destroy: function(validator, $field, options) {
+            if ($field.data('bv.remote.timer')) {
+                clearTimeout($field.data('bv.remote.timer'));
+                $field.removeData('bv.remote.timer');
+            }
         },
 
         /**
@@ -4933,22 +4944,38 @@
             data[options.name || name] = value;
 
             var dfd = new $.Deferred();
-            var xhr = $.ajax({
-                type: type,
-                headers: headers,
-                url: url,
-                dataType: 'json',
-                data: data
-            });
-            xhr.then(function(response) {
-                dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true', response.message ? response.message : null);
-            });
 
-            dfd.fail(function() {
-                xhr.abort();
-            });
+            function runCallback() {
+                var xhr = $.ajax({
+                    type: type,
+                    headers: headers,
+                    url: url,
+                    dataType: 'json',
+                    data: data
+                });
+                xhr.then(function(response) {
+                    dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true', response.message ? response.message : null);
+                });
 
-            return dfd;
+                dfd.fail(function() {
+                    xhr.abort();
+                });
+
+                return dfd;
+            }
+            
+            if (options.delay) {
+                // Since the form might have multiple fields with the same name
+                // I have to attach the timer to the field element
+                if ($field.data('bv.remote.timer')) {
+                    clearTimeout($field.data('bv.remote.timer'));
+                }
+
+                $field.data('bv.remote.timer', setTimeout(runCallback, options.delay));
+                return dfd;
+            } else {
+                return runCallback();
+            }
         }
     };
 }(window.jQuery));

src/js/validator/remote.js

@@ -9,10 +9,18 @@
             name: 'name',
             type: 'type',
             url: 'url',
-            debounceDelay: 'debounceDelay'
+            delay: 'delay'
         },
 
-        _timer: [],
+        /**
+         * Destroy the timer when destroying the bootstrapValidator (using validator.destroy() method)
+         */
+        destroy: function(validator, $field, options) {
+            if ($field.data('bv.remote.timer')) {
+                clearTimeout($field.data('bv.remote.timer'));
+                $field.removeData('bv.remote.timer');
+            }
+        },
 
         /**
          * Request a remote server to check the input value
@@ -56,16 +64,6 @@
             data[options.name || name] = value;
 
             var dfd = new $.Deferred();
-            
-            if (options.debounceDelay) {
-                if(this._timer[name]) {
-                    clearTimeout(this._timer[name]);
-                }
-                this._timer[name] = setTimeout(runCallback, options.debounceDelay);
-                return dfd;
-            }
-            else
-                return runCallback();
 
             function runCallback() {
                 var xhr = $.ajax({
@@ -75,16 +73,29 @@
                     dataType: 'json',
                     data: data
                 });
-                xhr.then(function (response) {
+                xhr.then(function(response) {
                     dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true', response.message ? response.message : null);
                 });
 
-                dfd.fail(function () {
+                dfd.fail(function() {
                     xhr.abort();
                 });
 
                 return dfd;
             }
+            
+            if (options.delay) {
+                // Since the form might have multiple fields with the same name
+                // I have to attach the timer to the field element
+                if ($field.data('bv.remote.timer')) {
+                    clearTimeout($field.data('bv.remote.timer'));
+                }
+
+                $field.data('bv.remote.timer', setTimeout(runCallback, options.delay));
+                return dfd;
+            } else {
+                return runCallback();
+            }
         }
     };
 }(window.jQuery));