Browse Source

Merge remote-tracking branch 'origin/master'

Conflicts:
	CHANGELOG.md
	dist/js/bootstrapValidator.min.js
phuoc 11 years ago
parent
commit
68654e96ee

+ 2 - 0
CHANGELOG.md

@@ -10,6 +10,8 @@
 * [#275](https://github.com/nghuuphuoc/bootstrapvalidator/issues/275): Add ```destroy()``` method
 * [#274](https://github.com/nghuuphuoc/bootstrapvalidator/pull/274): Fix feedback icons in ```input-group```, thanks to [@tiagofontella](https://github.com/tiagofontella)
 * [#288](https://github.com/nghuuphuoc/bootstrapvalidator/issues/288): Fix [```date``` validator](http://bootstrapvalidator.com/validators/date/) issue on IE8
+* [#282](https://github.com/nghuuphuoc/bootstrapvalidator/issues/282): Use error message that is returned from [```callback```](http://bootstrapvalidator.com/validators/callback/), [```remote```](http://bootstrapvalidator.com/validators/remote/) validators
+* [#287](https://github.com/nghuuphuoc/bootstrapvalidator/issues/287): Only send the submit button which is clicked. It's an enhancement for [#238](https://github.com/nghuuphuoc/bootstrapvalidator/issues/238)
 
 ## v0.4.5 (2015-05-15)
 

+ 0 - 114
demo/formWithoutLabels.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>BootstrapValidator demo</title>
-
-    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.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/bootstrapValidator.js"></script>
-</head>
-<body>
-    <div class="container" style="margin-top: 50px;">
-        <div class="row">
-            <div class="col-lg-4 col-lg-offset-4">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
-                        <h3 class="panel-title">Sign up</h3>
-                    </div>
-
-                    <div class="panel-body">
-                        <form id="defaultForm" method="post">
-                            <div class="form-group">
-                                <input type="text" class="form-control" name="username" placeholder="Username" />
-                            </div>
-
-                            <div class="form-group">
-                                <input type="text" class="form-control" name="email" placeholder="Email" />
-                            </div>
-
-                            <div class="form-group">
-                                <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>
-
-                            <div class="form-group">
-                                <button type="submit" class="btn btn-primary">Sign up</button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-<script type="text/javascript">
-$(document).ready(function() {
-    $('#defaultForm').bootstrapValidator({
-        message: 'This value is not valid',
-        feedbackIcons: {
-            valid: 'glyphicon glyphicon-ok',
-            invalid: 'glyphicon glyphicon-remove',
-            validating: 'glyphicon glyphicon-refresh'
-        },
-        fields: {
-            username: {
-                message: 'The username is not valid',
-                validators: {
-                    notEmpty: {
-                        message: 'The username is required and can\'t be empty'
-                    },
-                    stringLength: {
-                        min: 6,
-                        max: 30,
-                        message: 'The username must be more than 6 and less than 30 characters long'
-                    },
-                    regexp: {
-                        regexp: /^[a-zA-Z0-9_\.]+$/,
-                        message: 'The username can only consist of alphabetical, number, dot and underscore'
-                    }
-                }
-            },
-            email: {
-                validators: {
-                    notEmpty: {
-                        message: 'The email address is required and can\'t be empty'
-                    },
-                    emailAddress: {
-                        message: 'The input is not a valid email address'
-                    }
-                }
-            },
-            password: {
-                validators: {
-                    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: {
-                validators: {
-                    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'
-                    }
-                }
-            }
-        }
-    });
-});
-</script>
-</body>
-</html>

+ 1 - 0
demo/index.html

@@ -177,6 +177,7 @@
                         <div class="form-group">
                             <div class="col-lg-9 col-lg-offset-3">
                                 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
+                                <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
                                 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
                                 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
                             </div>

+ 0 - 118
demo/labelWithoutClass.html

@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>BootstrapValidator demo</title>
-
-    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.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/bootstrapValidator.js"></script>
-</head>
-<body>
-    <div class="container" style="margin-top: 50px;">
-        <div class="row">
-            <div class="col-lg-4 col-lg-offset-4">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
-                        <h3 class="panel-title">Sign up</h3>
-                    </div>
-
-                    <div class="panel-body">
-                        <form id="defaultForm" method="post">
-                            <div class="form-group">
-                                <label>Username</label>
-                                <input type="text" class="form-control" name="username" placeholder="Username" />
-                            </div>
-
-                            <div class="form-group">
-                                <label>Email</label>
-                                <input type="text" class="form-control" name="email" placeholder="Email" />
-                            </div>
-
-                            <div class="form-group">
-                                <label>Password</label>
-                                <input type="password" class="form-control" name="password" placeholder="Password" />
-                            </div>
-
-                            <div class="form-group">
-                                <label>Retype password</label>
-                                <input type="password" class="form-control" name="confirmPassword" placeholder="Retype password" />
-                            </div>
-
-                            <div class="form-group">
-                                <button type="submit" class="btn btn-primary">Sign up</button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-<script type="text/javascript">
-$(document).ready(function() {
-    $('#defaultForm').bootstrapValidator({
-        message: 'This value is not valid',
-        feedbackIcons: {
-            valid: 'glyphicon glyphicon-ok',
-            invalid: 'glyphicon glyphicon-remove',
-            validating: 'glyphicon glyphicon-refresh'
-        },
-        fields: {
-            username: {
-                message: 'The username is not valid',
-                validators: {
-                    notEmpty: {
-                        message: 'The username is required and can\'t be empty'
-                    },
-                    stringLength: {
-                        min: 6,
-                        max: 30,
-                        message: 'The username must be more than 6 and less than 30 characters long'
-                    },
-                    regexp: {
-                        regexp: /^[a-zA-Z0-9_\.]+$/,
-                        message: 'The username can only consist of alphabetical, number, dot and underscore'
-                    }
-                }
-            },
-            email: {
-                validators: {
-                    notEmpty: {
-                        message: 'The email address is required and can\'t be empty'
-                    },
-                    emailAddress: {
-                        message: 'The input is not a valid email address'
-                    }
-                }
-            },
-            password: {
-                validators: {
-                    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: {
-                validators: {
-                    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'
-                    }
-                }
-            }
-        }
-    });
-});
-</script>
-</body>
-</html>

+ 138 - 0
demo/message.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>BootstrapValidator demo</title>
+
+    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.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/bootstrapValidator.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="row">
+        <div class="page-header">
+            <h1>Use error message that is returned from remote/callback validator</h1>
+        </div>
+
+        <div class="col-lg-8 col-lg-offset-2">
+            <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
+                <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" autocomplete="off" />
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="col-lg-3 control-label">Password</label>
+                    <div class="col-lg-5">
+                        <input type="password" class="form-control" name="password" />
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <div class="col-lg-9 col-lg-offset-3">
+                        <button type="submit" class="btn btn-primary">Submit</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#defaultForm').bootstrapValidator({
+        message: 'This value is not valid',
+        feedbackIcons: {
+            valid: 'glyphicon glyphicon-ok',
+            invalid: 'glyphicon glyphicon-remove',
+            validating: 'glyphicon glyphicon-refresh'
+        },
+        fields: {
+            username: {
+                message: 'The username is not valid',
+                validators: {
+                    notEmpty: {
+                        message: 'The username is required and can\'t be empty'
+                    },
+                    remote: {
+                        url: 'remote2.php'
+                    },
+                    different: {
+                        field: 'password',
+                        message: 'The username and password can\'t be the same as each other'
+                    }
+                }
+            },
+            email: {
+                validators: {
+                    notEmpty: {
+                        message: 'The email address is required and can\'t be empty'
+                    },
+                    emailAddress: {
+                        message: 'The input is not a valid email address'
+                    },
+                    remote: {
+                        url: 'remote2.php'
+                    }
+                }
+            },
+            password: {
+                validators: {
+                    notEmpty: {
+                        message: 'The password is required and can\'t be empty'
+                    },
+                    different: {
+                        field: 'username',
+                        message: 'The password can\'t be the same as username'
+                    },
+                    callback: {
+                        callback: function(value, validator) {
+                            // Check the password strength
+                            if (value.length < 6) {
+                                return {
+                                    valid: false,
+                                    message: 'The password must be more than 6 characters'
+                                }
+                            }
+
+                            if (value === value.toLowerCase()) {
+                                return {
+                                    valid: false,
+                                    message: 'The password must contain at least one upper case character'
+                                }
+                            }
+                            if (value === value.toUpperCase()) {
+                                return {
+                                    valid: false,
+                                    message: 'The password must contain at least one lower case character'
+                                }
+                            }
+                            if (value.search(/[0-9]/) < 0) {
+                                return {
+                                    valid: false,
+                                    message: 'The password must contain at least one digit'
+                                }
+                            }
+
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+    });
+});
+</script>
+</body>
+</html>

+ 34 - 0
demo/remote2.php

@@ -0,0 +1,34 @@
+<?php
+// This is a sample PHP script which demonstrates the 'remote' validator
+// To make it work, point the web server to root Bootstrap Validate directory
+// and open the remote.html file:
+// http://domain.com/demo/remote.html
+
+//sleep(5);
+
+$valid   = true;
+$message = '';
+
+$users = array(
+    'admin'         => 'admin@domain.com',
+    'administrator' => 'administrator@domain.com',
+    'root'          => 'root@domain.com',
+);
+
+if (isset($_POST['username']) && array_key_exists($_POST['username'], $users)) {
+    $valid   = false;
+    $message = 'The username is not available';
+} else if (isset($_POST['email'])) {
+    $email = $_POST['email'];
+    foreach ($users as $k => $v) {
+        if ($email == $v) {
+            $valid   = false;
+            $message = 'The email is not available';
+            break;
+        }
+    }
+}
+
+echo json_encode(
+    $valid ? array('valid' => $valid) : array('valid' => $valid, 'message' => $message)
+);

+ 25 - 16
dist/js/bootstrapValidator.js

@@ -236,17 +236,6 @@
                             $field.attr('data-bv-field', field);
                             options.fields[field] = $.extend({}, opts, options.fields[field]);
                         }
-                    })
-                    .end()
-                // Create hidden inputs to send the submit buttons
-                .find(this.options.submitButtons)
-                    .each(function() {
-                        $('<input/>')
-                            .attr('type', 'hidden')
-                            .attr('data-bv-submit-hidden', '')
-                            .attr('name', $(this).attr('name'))
-                            .val($(this).val())
-                            .appendTo(that.$form);
                     });
 
             this.options = $.extend(true, this.options, options);
@@ -680,14 +669,20 @@
                 $field.data('bv.result.' + validatorName, this.STATUS_VALIDATING);
                 validateResult = $.fn.bootstrapValidator.validators[validatorName].validate(this, $field, validators[validatorName]);
 
+                // validateResult can be a $.Deferred object ...
                 if ('object' == typeof validateResult) {
                     updateAll ? this.updateStatus(field, this.STATUS_VALIDATING, validatorName)
                               : this.updateElementStatus($field, this.STATUS_VALIDATING, validatorName);
                     $field.data('bv.dfs.' + validatorName, validateResult);
 
-                    validateResult.done(function($f, v, isValid) {
+                    validateResult.done(function($f, v, isValid, message) {
                         // v is validator name
                         $f.removeData('bv.dfs.' + v);
+                        if (message) {
+                            // Update the error message
+                            $field.data('bv.messages').find('.help-block[data-bv-validator="' + v + '"][data-bv-for="' + $f.attr('data-bv-field') + '"]').html(message);
+                        }
+
                         updateAll ? that.updateStatus($f.attr('data-bv-field'), isValid ? that.STATUS_VALID : that.STATUS_INVALID, v)
                                   : that.updateElementStatus($f, isValid ? that.STATUS_VALID : that.STATUS_INVALID, v);
 
@@ -696,7 +691,9 @@
 							that._submit();
 						}
                     });
-                } else if ('boolean' == typeof validateResult) {
+                }
+                // ... or a boolean value
+                else if ('boolean' == typeof validateResult) {
                     updateAll ? this.updateStatus(field, validateResult ? this.STATUS_VALID : this.STATUS_INVALID, validatorName)
                               : this.updateElementStatus($field, validateResult ? this.STATUS_VALID : this.STATUS_INVALID, validatorName);
                 }
@@ -923,6 +920,16 @@
          * It might be used when you want to submit the form right inside the submitHandler()
          */
         defaultSubmit: function() {
+            if (this.$submitButton) {
+                // Create hidden input to send the submit buttons
+                $('<input/>')
+                    .attr('type', 'hidden')
+                    .attr('data-bv-submit-hidden', '')
+                    .attr('name', this.$submitButton.attr('name'))
+                    .val(this.$submitButton.val())
+                    .appendTo(this.$form);
+            }
+            // Submit form
             this.$form.off('submit.bv').submit();
         },
 
@@ -978,6 +985,7 @@
                         .get()
                 );
             });
+
             return messages;
         },
 
@@ -1348,8 +1356,9 @@
         validate: function(validator, $field, options) {
             var value = $field.val();
             if (options.callback && 'function' == typeof options.callback) {
-                var dfd = new $.Deferred();
-                dfd.resolve($field, 'callback', options.callback.call(this, value, validator));
+                var dfd      = new $.Deferred(),
+                    response = options.callback.call(this, value, validator);
+                dfd.resolve($field, 'callback', 'boolean' == typeof response ? response : response.valid, 'object' == typeof response && response.message ? response.message : null);
                 return dfd;
             }
             return true;
@@ -3566,7 +3575,7 @@
                 data: data
             });
             xhr.then(function(response) {
-                dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true');
+                dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true', response.message ? response.message : null);
             });
 
             dfd.fail(function() {

+ 21 - 13
src/js/bootstrapValidator.js

@@ -235,17 +235,6 @@
                             $field.attr('data-bv-field', field);
                             options.fields[field] = $.extend({}, opts, options.fields[field]);
                         }
-                    })
-                    .end()
-                // Create hidden inputs to send the submit buttons
-                .find(this.options.submitButtons)
-                    .each(function() {
-                        $('<input/>')
-                            .attr('type', 'hidden')
-                            .attr('data-bv-submit-hidden', '')
-                            .attr('name', $(this).attr('name'))
-                            .val($(this).val())
-                            .appendTo(that.$form);
                     });
 
             this.options = $.extend(true, this.options, options);
@@ -679,14 +668,20 @@
                 $field.data('bv.result.' + validatorName, this.STATUS_VALIDATING);
                 validateResult = $.fn.bootstrapValidator.validators[validatorName].validate(this, $field, validators[validatorName]);
 
+                // validateResult can be a $.Deferred object ...
                 if ('object' == typeof validateResult) {
                     updateAll ? this.updateStatus(field, this.STATUS_VALIDATING, validatorName)
                               : this.updateElementStatus($field, this.STATUS_VALIDATING, validatorName);
                     $field.data('bv.dfs.' + validatorName, validateResult);
 
-                    validateResult.done(function($f, v, isValid) {
+                    validateResult.done(function($f, v, isValid, message) {
                         // v is validator name
                         $f.removeData('bv.dfs.' + v);
+                        if (message) {
+                            // Update the error message
+                            $field.data('bv.messages').find('.help-block[data-bv-validator="' + v + '"][data-bv-for="' + $f.attr('data-bv-field') + '"]').html(message);
+                        }
+
                         updateAll ? that.updateStatus($f.attr('data-bv-field'), isValid ? that.STATUS_VALID : that.STATUS_INVALID, v)
                                   : that.updateElementStatus($f, isValid ? that.STATUS_VALID : that.STATUS_INVALID, v);
 
@@ -695,7 +690,9 @@
 							that._submit();
 						}
                     });
-                } else if ('boolean' == typeof validateResult) {
+                }
+                // ... or a boolean value
+                else if ('boolean' == typeof validateResult) {
                     updateAll ? this.updateStatus(field, validateResult ? this.STATUS_VALID : this.STATUS_INVALID, validatorName)
                               : this.updateElementStatus($field, validateResult ? this.STATUS_VALID : this.STATUS_INVALID, validatorName);
                 }
@@ -922,6 +919,16 @@
          * It might be used when you want to submit the form right inside the submitHandler()
          */
         defaultSubmit: function() {
+            if (this.$submitButton) {
+                // Create hidden input to send the submit buttons
+                $('<input/>')
+                    .attr('type', 'hidden')
+                    .attr('data-bv-submit-hidden', '')
+                    .attr('name', this.$submitButton.attr('name'))
+                    .val(this.$submitButton.val())
+                    .appendTo(this.$form);
+            }
+            // Submit form
             this.$form.off('submit.bv').submit();
         },
 
@@ -977,6 +984,7 @@
                         .get()
                 );
             });
+
             return messages;
         },
 

+ 3 - 2
src/js/validator/callback.js

@@ -17,8 +17,9 @@
         validate: function(validator, $field, options) {
             var value = $field.val();
             if (options.callback && 'function' == typeof options.callback) {
-                var dfd = new $.Deferred();
-                dfd.resolve($field, 'callback', options.callback.call(this, value, validator));
+                var dfd      = new $.Deferred(),
+                    response = options.callback.call(this, value, validator);
+                dfd.resolve($field, 'callback', 'boolean' == typeof response ? response : response.valid, 'object' == typeof response && response.message ? response.message : null);
                 return dfd;
             }
             return true;

+ 1 - 1
src/js/validator/remote.js

@@ -45,7 +45,7 @@
                 data: data
             });
             xhr.then(function(response) {
-                dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true');
+                dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true', response.message ? response.message : null);
             });
 
             dfd.fail(function() {