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

#107: Add container option to indicate the message container

nghuuphuoc 11 years ago
parent
12fe3ed2a2
commit
6cc5150cd2
4 changed files with 148 additions and 27 deletions
Unified View Show Diff Stats
  1. 101 0
      demo/container.html
  2. 23 13
      dist/js/bootstrapValidator.js
  3. 1 1
      dist/js/bootstrapValidator.min.js
  4. 23 13
      src/js/bootstrapValidator.js

+ 101 - 0
demo/container.html
View File 

@@ -0,0 +1,101 @@
 
+<!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>Profile</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" />
 
+                                <span class="help-block" id="firstNameMessage">
 
+
 
+                                </span>
 
+                            </div>
 
+                            <div class="col-lg-4">
 
+                                <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 
+                                <span class="help-block lastNameMessage"></span>
 
+                            </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">
 
+                            <div class="col-lg-9 col-lg-offset-3">
 
+                                <button type="submit" class="btn btn-primary">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',
 
+        feedbackIcons: {
 
+            valid: 'glyphicon glyphicon-ok',
 
+            invalid: 'glyphicon glyphicon-remove',
 
+            validating: 'glyphicon glyphicon-refresh'
 
+        },
 
+        fields: {
 
+            firstName: {
 
+                container: '#firstNameMessage',
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The first name is required and cannot be empty'
 
+                    }
 
+                }
 
+            },
 
+            lastName: {
 
+                container: '.lastNameMessage',
 
+                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'
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    });
 
+});
 
+</script>
 
+</body>
 
+</html>

+ 23 - 13
dist/js/bootstrapValidator.js
View File 

@@ -142,7 +142,8 @@
 
             // Create help block elements for showing the error messages
 
             // Create help block elements for showing the error messages
 
             var $field   = $(fields[0]),
 
             var $field   = $(fields[0]),
 
                 $parent  = $field.parents('.form-group'),
 
                 $parent  = $field.parents('.form-group'),
 
-                $message = this._getMessageContainer($field);
 
+                // 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);
 
 
 
             $field.data('bootstrapValidator.messageContainer', $message);
 
             $field.data('bootstrapValidator.messageContainer', $message);
 
             for (var validatorName in this.options.fields[field].validators) {
 
             for (var validatorName in this.options.fields[field].validators) {
 
@@ -154,7 +155,7 @@
 
                 this.results[field][validatorName] = this.STATUS_NOT_VALIDATED;
 
                 this.results[field][validatorName] = this.STATUS_NOT_VALIDATED;
 
                 $('<small/>')
 
                 $('<small/>')
 
                     .css('display', 'none')
 
                     .css('display', 'none')
 
-                    .attr('data-bs-validator', validatorName)
 
+                    .attr('data-bv-validator', validatorName)
 
                     .html(this.options.fields[field].validators[validatorName].message || this.options.message)
 
                     .html(this.options.fields[field].validators[validatorName].message || this.options.message)
 
                     .addClass('help-block')
 
                     .addClass('help-block')
 
                     .appendTo($message);
 
                     .appendTo($message);
 
@@ -166,7 +167,7 @@
 
                 && this.options.feedbackIcons.validating && this.options.feedbackIcons.invalid && this.options.feedbackIcons.valid)
 
                 && this.options.feedbackIcons.validating && this.options.feedbackIcons.invalid && this.options.feedbackIcons.valid)
 
             {
 
             {
 
                 $parent.addClass('has-feedback');
 
                 $parent.addClass('has-feedback');
 
-                var $icon = $('<i/>').css('display', 'none').addClass('form-control-feedback').insertAfter($(fields[fields.length - 1]));
 
+                var $icon = $('<i/>').css('display', 'none').addClass('form-control-feedback').attr('data-bv-field', field).insertAfter($(fields[fields.length - 1]));
 
                 // The feedback icon does not render correctly if there is no label
 
                 // The feedback icon does not render correctly if there is no label
 
                 // https://github.com/twbs/bootstrap/issues/12873
 
                 // https://github.com/twbs/bootstrap/issues/12873
 
                 if ($parent.find('label').length == 0) {
 
                 if ($parent.find('label').length == 0) {
 
@@ -409,7 +410,8 @@
 
                 field    = $field.attr('name'),
 
                 field    = $field.attr('name'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $message = $field.data('bootstrapValidator.messageContainer'),
 
                 $message = $field.data('bootstrapValidator.messageContainer'),
 
-                $errors  = $message.find('.help-block[data-bs-validator]');
 
+                $errors  = $message.find('.help-block[data-bv-validator]'),
 
+                $icon    = $parent.find('.form-control-feedback[data-bv-field="' + field + '"]');
 
 
 
             // Update status
 
             // Update status
 
             if (validatorName) {
 
             if (validatorName) {
 
@@ -426,29 +428,35 @@
 
                     this._disableSubmitButtons(true);
 
                     this._disableSubmitButtons(true);
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
                     // TODO: Show validating message
 
                     // TODO: Show validating message
 
-                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
+                    validatorName ? $errors.filter('.help-block[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
+                    if ($icon) {
 
+                        $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
+                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_INVALID:
 
                 case this.STATUS_INVALID:
 
                     this._disableSubmitButtons(true);
 
                     this._disableSubmitButtons(true);
 
                     $parent.removeClass('has-success').addClass('has-error');
 
                     $parent.removeClass('has-success').addClass('has-error');
 
-                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').show() : $errors.show();
 
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
+                    validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').show() : $errors.show();
 
+                    if ($icon) {
 
+                        $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
+                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_VALID:
 
                 case this.STATUS_VALID:
 
-                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
+                    validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
 
 
                     // If the field is valid
 
                     // If the field is valid
 
                     if ($errors.filter(function() {
 
                     if ($errors.filter(function() {
 
-                            var display = $(this).css('display'), v = $(this).attr('data-bs-validator');
 
+                            var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                             return ('block' == display) || (that.results[field][v] != that.STATUS_VALID);
 
                             return ('block' == display) || (that.results[field][v] != that.STATUS_VALID);
 
                         }).length == 0
 
                         }).length == 0
 
                     ) {
 
                     ) {
 
                         this._disableSubmitButtons(false);
 
                         this._disableSubmitButtons(false);
 
                         $parent.removeClass('has-error').addClass('has-success');
 
                         $parent.removeClass('has-error').addClass('has-success');
 
-                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
 
+                        if ($icon) {
 
+                            $icon.removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
 
+                        }
 
                     }
 
                     }
 
                     break;
 
                     break;
 
 
 
@@ -456,8 +464,10 @@
 
                 default:
 
                 default:
 
                     this._disableSubmitButtons(false);
 
                     this._disableSubmitButtons(false);
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
-                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
+                    validatorName ? $errors.filter('.help-block[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
+                    if ($icon) {
 
+                        $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
+                    }
 
                     break;
 
                     break;
 
             }
 
             }

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


+ 23 - 13
src/js/bootstrapValidator.js
View File 

@@ -141,7 +141,8 @@
 
             // Create help block elements for showing the error messages
 
             // Create help block elements for showing the error messages
 
             var $field   = $(fields[0]),
 
             var $field   = $(fields[0]),
 
                 $parent  = $field.parents('.form-group'),
 
                 $parent  = $field.parents('.form-group'),
 
-                $message = this._getMessageContainer($field);
 
+                // 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);
 
 
 
             $field.data('bootstrapValidator.messageContainer', $message);
 
             $field.data('bootstrapValidator.messageContainer', $message);
 
             for (var validatorName in this.options.fields[field].validators) {
 
             for (var validatorName in this.options.fields[field].validators) {
 
@@ -153,7 +154,7 @@
 
                 this.results[field][validatorName] = this.STATUS_NOT_VALIDATED;
 
                 this.results[field][validatorName] = this.STATUS_NOT_VALIDATED;
 
                 $('<small/>')
 
                 $('<small/>')
 
                     .css('display', 'none')
 
                     .css('display', 'none')
 
-                    .attr('data-bs-validator', validatorName)
 
+                    .attr('data-bv-validator', validatorName)
 
                     .html(this.options.fields[field].validators[validatorName].message || this.options.message)
 
                     .html(this.options.fields[field].validators[validatorName].message || this.options.message)
 
                     .addClass('help-block')
 
                     .addClass('help-block')
 
                     .appendTo($message);
 
                     .appendTo($message);
 
@@ -165,7 +166,7 @@
 
                 && this.options.feedbackIcons.validating && this.options.feedbackIcons.invalid && this.options.feedbackIcons.valid)
 
                 && this.options.feedbackIcons.validating && this.options.feedbackIcons.invalid && this.options.feedbackIcons.valid)
 
             {
 
             {
 
                 $parent.addClass('has-feedback');
 
                 $parent.addClass('has-feedback');
 
-                var $icon = $('<i/>').css('display', 'none').addClass('form-control-feedback').insertAfter($(fields[fields.length - 1]));
 
+                var $icon = $('<i/>').css('display', 'none').addClass('form-control-feedback').attr('data-bv-field', field).insertAfter($(fields[fields.length - 1]));
 
                 // The feedback icon does not render correctly if there is no label
 
                 // The feedback icon does not render correctly if there is no label
 
                 // https://github.com/twbs/bootstrap/issues/12873
 
                 // https://github.com/twbs/bootstrap/issues/12873
 
                 if ($parent.find('label').length == 0) {
 
                 if ($parent.find('label').length == 0) {
 
@@ -408,7 +409,8 @@
 
                 field    = $field.attr('name'),
 
                 field    = $field.attr('name'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $parent  = $field.parents('.form-group'),
 
                 $message = $field.data('bootstrapValidator.messageContainer'),
 
                 $message = $field.data('bootstrapValidator.messageContainer'),
 
-                $errors  = $message.find('.help-block[data-bs-validator]');
 
+                $errors  = $message.find('.help-block[data-bv-validator]'),
 
+                $icon    = $parent.find('.form-control-feedback[data-bv-field="' + field + '"]');
 
 
 
             // Update status
 
             // Update status
 
             if (validatorName) {
 
             if (validatorName) {
 
@@ -425,29 +427,35 @@
 
                     this._disableSubmitButtons(true);
 
                     this._disableSubmitButtons(true);
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
                     // TODO: Show validating message
 
                     // TODO: Show validating message
 
-                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
+                    validatorName ? $errors.filter('.help-block[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
+                    if ($icon) {
 
+                        $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
+                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_INVALID:
 
                 case this.STATUS_INVALID:
 
                     this._disableSubmitButtons(true);
 
                     this._disableSubmitButtons(true);
 
                     $parent.removeClass('has-success').addClass('has-error');
 
                     $parent.removeClass('has-success').addClass('has-error');
 
-                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').show() : $errors.show();
 
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
+                    validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').show() : $errors.show();
 
+                    if ($icon) {
 
+                        $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
+                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_VALID:
 
                 case this.STATUS_VALID:
 
-                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
+                    validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
 
 
                     // If the field is valid
 
                     // If the field is valid
 
                     if ($errors.filter(function() {
 
                     if ($errors.filter(function() {
 
-                            var display = $(this).css('display'), v = $(this).attr('data-bs-validator');
 
+                            var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                             return ('block' == display) || (that.results[field][v] != that.STATUS_VALID);
 
                             return ('block' == display) || (that.results[field][v] != that.STATUS_VALID);
 
                         }).length == 0
 
                         }).length == 0
 
                     ) {
 
                     ) {
 
                         this._disableSubmitButtons(false);
 
                         this._disableSubmitButtons(false);
 
                         $parent.removeClass('has-error').addClass('has-success');
 
                         $parent.removeClass('has-error').addClass('has-success');
 
-                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
 
+                        if ($icon) {
 
+                            $icon.removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
 
+                        }
 
                     }
 
                     }
 
                     break;
 
                     break;
 
 
 
@@ -455,8 +463,10 @@
 
                 default:
 
                 default:
 
                     this._disableSubmitButtons(false);
 
                     this._disableSubmitButtons(false);
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
                     $parent.removeClass('has-success').removeClass('has-error');
 
-                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
+                    validatorName ? $errors.filter('.help-block[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
+                    if ($icon) {
 
+                        $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
+                    }
 
                     break;
 
                     break;
 
             }
 
             }