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

#164: Add container option for indicating the element showing all errors

nghuuphuoc 11 years ago
parent
8b9befe20e
commit
2cdeafec48
6 changed files with 234 additions and 22 deletions
Unified View Show Diff Stats
  1. 1 0
      CHANGELOG.md
  2. 2 4
      demo/container.html
  3. 169 0
      demo/container2.html
  4. 30 8
      dist/js/bootstrapValidator.js
  5. 2 2
      dist/js/bootstrapValidator.min.js
  6. 30 8
      src/js/bootstrapValidator.js

+ 1 - 0
CHANGELOG.md
View File 

@@ -4,6 +4,7 @@
 
 
 
 * [#121](https://github.com/nghuuphuoc/bootstrapvalidator/issues/121): Add events for form validate successfully or not
 
 * [#121](https://github.com/nghuuphuoc/bootstrapvalidator/issues/121): Add events for form validate successfully or not
 
 * [#195](https://github.com/nghuuphuoc/bootstrapvalidator/issues/195): Add events for field validation
 
 * [#195](https://github.com/nghuuphuoc/bootstrapvalidator/issues/195): Add events for field validation
 
+* [#164](https://github.com/nghuuphuoc/bootstrapvalidator/issues/164): Add ```container``` option for indicating the element showing all errors
 
 * [#211](https://github.com/nghuuphuoc/bootstrapvalidator/issues/211), [#235](https://github.com/nghuuphuoc/bootstrapvalidator/issues/235): Add new method ```getInvalidFields()``` that returns all invalid fields
 
 * [#211](https://github.com/nghuuphuoc/bootstrapvalidator/issues/211), [#235](https://github.com/nghuuphuoc/bootstrapvalidator/issues/235): Add new method ```getInvalidFields()``` that returns all invalid fields
 
 
 
 ## v0.4.5 (2015-05-15)
 
 ## v0.4.5 (2015-05-15)

+ 2 - 4
demo/container.html
View File 

@@ -25,13 +25,11 @@
 
                             <label class="col-lg-3 control-label">Full name</label>
 
                             <label class="col-lg-3 control-label">Full name</label>
 
                             <div class="col-lg-4">
 
                             <div class="col-lg-4">
 
                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
 
                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
 
-                                <span class="help-block" id="firstNameMessage">
 
-
 
-                                </span>
 
+                                <span class="help-block" id="firstNameMessage" />
 
                             </div>
 
                             </div>
 
                             <div class="col-lg-4">
 
                             <div class="col-lg-4">
 
                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 
                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 
-                                <span class="help-block lastNameMessage"></span>
 
+                                <span class="help-block lastNameMessage" />
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>

+ 169 - 0
demo/container2.html
View File 

@@ -0,0 +1,169 @@
 
+<!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">
 
+            <!-- form: -->
 
+            <section>
 
+                <div class="col-lg-8 col-lg-offset-2">
 
+                    <div class="page-header">
 
+                        <h2><code>container</code> example</h2>
 
+                    </div>
 
+
 
+                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Full name</label>
 
+                            <div class="col-lg-4">
 
+                                <input type="text" class="form-control" name="firstName" placeholder="First name" />
 
+                            </div>
 
+                            <div class="col-lg-4">
 
+                                <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 
+                            </div>
 
+                        </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" />
 
+                            </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>
 
+
 
+                        <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">
 
+                            <label class="col-lg-3 control-label">Gender</label>
 
+                            <div class="col-lg-5">
 
+                                <div class="radio">
 
+                                    <label>
 
+                                        <input type="radio" name="gender" value="male" /> Male
 
+                                    </label>
 
+                                </div>
 
+                                <div class="radio">
 
+                                    <label>
 
+                                        <input type="radio" name="gender" value="female" /> Female
 
+                                    </label>
 
+                                </div>
 
+                                <div class="radio">
 
+                                    <label>
 
+                                        <input type="radio" name="gender" value="other" /> Other
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+
 
+                        <div class="form-group">
 
+                            <div class="col-lg-9 col-lg-offset-3">
 
+                                <div id="errors"></div>
 
+                            </div>
 
+                        </div>
 
+
 
+                        <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>
 
+                            </div>
 
+                        </div>
 
+                    </form>
 
+                </div>
 
+            </section>
 
+            <!-- :form -->
 
+        </div>
 
+    </div>
 
+
 
+<script type="text/javascript">
 
+$(document).ready(function() {
 
+    $('#defaultForm').bootstrapValidator({
 
+        message: 'This value is not valid',
 
+        container: '#errors',
 
+        feedbackIcons: {
 
+            valid: 'glyphicon glyphicon-ok',
 
+            invalid: 'glyphicon glyphicon-remove',
 
+            validating: 'glyphicon glyphicon-refresh'
 
+        },
 
+        fields: {
 
+            firstName: {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The first name is required and cannot be empty'
 
+                    }
 
+                }
 
+            },
 
+            lastName: {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The last name is required and cannot be empty'
 
+                    }
 
+                }
 
+            },
 
+            username: {
 
+                message: 'The username is not valid',
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The username is required and cannot 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'
 
+                    },
 
+                    different: {
 
+                        field: 'password',
 
+                        message: 'The username and password cannot be the same as each other'
 
+                    }
 
+                }
 
+            },
 
+            email: {
 
+                validators: {
 
+                    emailAddress: {
 
+                        message: 'The input is not a valid email address'
 
+                    }
 
+                }
 
+            },
 
+            password: {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The password is required and cannot be empty'
 
+                    },
 
+                    different: {
 
+                        field: 'username',
 
+                        message: 'The password cannot be the same as username'
 
+                    }
 
+                }
 
+            },
 
+            gender: {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The gender is required'
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    });
 
+});
 
+</script>
 
+</body>
 
+</html>

+ 30 - 8
dist/js/bootstrapValidator.js
View File 

@@ -289,11 +289,16 @@
 
                 updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
 
                 updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
 
                 $parent   = $field.parents('.form-group'),
 
                 $parent   = $field.parents('.form-group'),
 
                 // Allow user to indicate where the error messages are shown
 
                 // Allow user to indicate where the error messages are shown
 
-                $message  = this.options.fields[field].container ? $parent.find(this.options.fields[field].container) : this._getMessageContainer($field);
 
+                container = this.options.fields[field].container || this.options.container,
 
+                $message  = container ? $(container) : this._getMessageContainer($field);
 
+
 
+            if (container) {
 
+                $message.addClass('has-error');
 
+            }
 
 
 
             // Remove all error messages and feedback icons
 
             // Remove all error messages and feedback icons
 
-            $message.find('.help-block[data-bv-validator]').remove();
 
-            $parent.find('i[data-bv-field]').remove();
 
+            $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]').remove();
 
+            $parent.find('i[data-bv-icon-for="' + field + '"]').remove();
 
 
 
             // Set the attribute to indicate the fields which are defined by selector
 
             // Set the attribute to indicate the fields which are defined by selector
 
             if (!$field.attr('data-bv-field')) {
 
             if (!$field.attr('data-bv-field')) {
 
@@ -316,9 +321,10 @@
 
                 if (!updateAll || index == total - 1) {
 
                 if (!updateAll || index == total - 1) {
 
                     $('<small/>')
 
                     $('<small/>')
 
                         .css('display', 'none')
 
                         .css('display', 'none')
 
+                        .addClass('help-block')
 
                         .attr('data-bv-validator', validatorName)
 
                         .attr('data-bv-validator', validatorName)
 
+                        .attr('data-bv-for', field)
 
                         .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
                         .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
-                        .addClass('help-block')
 
                         .appendTo($message);
 
                         .appendTo($message);
 
                 }
 
                 }
 
             }
 
             }
 
@@ -713,7 +719,7 @@
 
                 field    = $field.attr('data-bv-field'),
 
                 field    = $field.attr('data-bv-field'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $message = $field.data('bv.messages'),
 
                 $message = $field.data('bv.messages'),
 
-                $errors  = $message.find('.help-block[data-bv-validator]'),
 
+                $errors  = $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]'),
 
                 $icon    = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]');
 
                 $icon    = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]');
 
 
 
             // Update status
 
             // Update status
 
@@ -779,13 +785,29 @@
 
 
 
                     // Check if all elements in given container are valid
 
                     // Check if all elements in given container are valid
 
                     var isValidContainer = function($container) {
 
                     var isValidContainer = function($container) {
 
-                        return $container
 
-                                    .find('.help-block[data-bv-validator]')
 
+                        var map = {};
 
+                        $container.find('[data-bv-field]').each(function() {
 
+                            var field = $(this).attr('data-bv-field');
 
+                            if (!map[field]) {
 
+                                map[field] = $(this).data('bv.messages');
 
+                            }
 
+                        });
 
+
 
+                        for (var field in map) {
 
+                            if (map[field]
 
+                                    .find('.help-block[data-bv-validator][data-bv-for="' + field + '"]')
 
                                     .filter(function() {
 
                                     .filter(function() {
 
                                         var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                                         var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                                         return ('block' == display) || ($field.data('bv.result.' + v) && $field.data('bv.result.' + v) != that.STATUS_VALID);
 
                                         return ('block' == display) || ($field.data('bv.result.' + v) && $field.data('bv.result.' + v) != that.STATUS_VALID);
 
                                     })
 
                                     })
 
-                                    .length == 0;
 
+                                    .length != 0)
 
+                            {
 
+                                // The field is not valid
 
+                                return false;
 
+                            }
 
+                        }
 
+
 
+                        return true;
 
                     };
 
                     };
 
                     $parent.removeClass('has-error has-success').addClass(isValidContainer($parent) ? 'has-success' : 'has-error');
 
                     $parent.removeClass('has-error has-success').addClass(isValidContainer($parent) ? 'has-success' : 'has-error');
 
                     if ($tab) {
 
                     if ($tab) {

File diff suppressed because it is too large
+ 2 - 2
dist/js/bootstrapValidator.min.js


+ 30 - 8
src/js/bootstrapValidator.js
View File 

@@ -288,11 +288,16 @@
 
                 updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
 
                 updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
 
                 $parent   = $field.parents('.form-group'),
 
                 $parent   = $field.parents('.form-group'),
 
                 // Allow user to indicate where the error messages are shown
 
                 // Allow user to indicate where the error messages are shown
 
-                $message  = this.options.fields[field].container ? $parent.find(this.options.fields[field].container) : this._getMessageContainer($field);
 
+                container = this.options.fields[field].container || this.options.container,
 
+                $message  = container ? $(container) : this._getMessageContainer($field);
 
+
 
+            if (container) {
 
+                $message.addClass('has-error');
 
+            }
 
 
 
             // Remove all error messages and feedback icons
 
             // Remove all error messages and feedback icons
 
-            $message.find('.help-block[data-bv-validator]').remove();
 
-            $parent.find('i[data-bv-field]').remove();
 
+            $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]').remove();
 
+            $parent.find('i[data-bv-icon-for="' + field + '"]').remove();
 
 
 
             // Set the attribute to indicate the fields which are defined by selector
 
             // Set the attribute to indicate the fields which are defined by selector
 
             if (!$field.attr('data-bv-field')) {
 
             if (!$field.attr('data-bv-field')) {
 
@@ -315,9 +320,10 @@
 
                 if (!updateAll || index == total - 1) {
 
                 if (!updateAll || index == total - 1) {
 
                     $('<small/>')
 
                     $('<small/>')
 
                         .css('display', 'none')
 
                         .css('display', 'none')
 
+                        .addClass('help-block')
 
                         .attr('data-bv-validator', validatorName)
 
                         .attr('data-bv-validator', validatorName)
 
+                        .attr('data-bv-for', field)
 
                         .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
                         .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
-                        .addClass('help-block')
 
                         .appendTo($message);
 
                         .appendTo($message);
 
                 }
 
                 }
 
             }
 
             }
 
@@ -712,7 +718,7 @@
 
                 field    = $field.attr('data-bv-field'),
 
                 field    = $field.attr('data-bv-field'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $message = $field.data('bv.messages'),
 
                 $message = $field.data('bv.messages'),
 
-                $errors  = $message.find('.help-block[data-bv-validator]'),
 
+                $errors  = $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]'),
 
                 $icon    = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]');
 
                 $icon    = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]');
 
 
 
             // Update status
 
             // Update status
 
@@ -778,13 +784,29 @@
 
 
 
                     // Check if all elements in given container are valid
 
                     // Check if all elements in given container are valid
 
                     var isValidContainer = function($container) {
 
                     var isValidContainer = function($container) {
 
-                        return $container
 
-                                    .find('.help-block[data-bv-validator]')
 
+                        var map = {};
 
+                        $container.find('[data-bv-field]').each(function() {
 
+                            var field = $(this).attr('data-bv-field');
 
+                            if (!map[field]) {
 
+                                map[field] = $(this).data('bv.messages');
 
+                            }
 
+                        });
 
+
 
+                        for (var field in map) {
 
+                            if (map[field]
 
+                                    .find('.help-block[data-bv-validator][data-bv-for="' + field + '"]')
 
                                     .filter(function() {
 
                                     .filter(function() {
 
                                         var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                                         var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                                         return ('block' == display) || ($field.data('bv.result.' + v) && $field.data('bv.result.' + v) != that.STATUS_VALID);
 
                                         return ('block' == display) || ($field.data('bv.result.' + v) && $field.data('bv.result.' + v) != that.STATUS_VALID);
 
                                     })
 
                                     })
 
-                                    .length == 0;
 
+                                    .length != 0)
 
+                            {
 
+                                // The field is not valid
 
+                                return false;
 
+                            }
 
+                        }
 
+
 
+                        return true;
 
                     };
 
                     };
 
                     $parent.removeClass('has-error has-success').addClass(isValidContainer($parent) ? 'has-success' : 'has-error');
 
                     $parent.removeClass('has-error has-success').addClass(isValidContainer($parent) ? 'has-success' : 'has-error');
 
                     if ($tab) {
 
                     if ($tab) {