#48: Add optional feedback icons

CHANGELOG.md

@@ -8,6 +8,7 @@ __New features__:
 * #26, #27, #67: Add choice validator
 * [#36, #58: Add method to validate form manually](https://github.com/nghuuphuoc/bootstrapvalidator/issues/58)
 * [#42: Add submit button to ```submitHandler()``` parameter](https://github.com/nghuuphuoc/bootstrapvalidator/issues/42)
+* [#48: Add optional feedback icons](https://github.com/nghuuphuoc/bootstrapvalidator/issues/48)
 * [#64: Support Danish zip code](https://github.com/nghuuphuoc/bootstrapvalidator/issues/64)
 * [#65: Support Sweden zip code](https://github.com/nghuuphuoc/bootstrapvalidator/issues/64)
 * [#70: Support custom grid columns](https://github.com/nghuuphuoc/bootstrapvalidator/issues/70)

demo/index.html

@@ -31,7 +31,7 @@
                         <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" disabled />
+                                <input type="text" class="form-control" name="email" />
                             </div>
                         </div>
 
@@ -51,7 +51,7 @@
 
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Gender</label>
-                            <div class="col-lg-9">
+                            <div class="col-lg-5">
                                 <div class="radio">
                                     <label>
                                         <input type="radio" name="gender" value="male" /> Male
@@ -72,7 +72,7 @@
 
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Languages</label>
-                            <div class="col-lg-9">
+                            <div class="col-lg-5">
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="languages[]" value="english" /> English
@@ -103,7 +103,7 @@
 
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Programming Languages</label>
-                            <div class="col-lg-9">
+                            <div class="col-lg-5">
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="net" /> .Net
@@ -194,10 +194,10 @@ $(document).ready(function() {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     },
-                    remote: {
-                        url: 'remote.php',
-                        message: 'The username is not available'
-                    },
+//                    remote: {
+//                        url: 'remote.php',
+//                        message: 'The username is not available'
+//                    },
                     different: {
                         field: 'password',
                         message: 'The username and password can\'t be the same as each other'

dist/js/bootstrapValidator.js

@@ -165,6 +165,14 @@
                         .appendTo($parent);
                 }
             }
+
+            // Prepare the feedback icons
+            // Available from Bootstrap 3.1 (http://getbootstrap.com/css/#forms-control-validation)
+            $parent.addClass('has-feedback');
+            $('<span/>')
+                .css('display', 'none')
+                .addClass('glyphicon form-control-feedback')
+                .insertAfter($(fields[fields.length - 1]));
         },
 
         /**
@@ -318,14 +326,22 @@
                 validator = this.options.fields[field].validators[validatorName],
                 message   = validator.message || this.options.message;
 
-            // Add has-error class to parent element
             $field
                 .parents('.form-group')
+                    // Add has-error class to parent element
                     .removeClass('has-success')
                     .addClass('has-error')
+                    // Show error element
                     .find('.help-block[data-bs-validator="' + validatorName + '"]')
                         .html(message)
+                        .show()
+                        .end()
+                    // Show feedback icon
+                    .find('.form-control-feedback')
+                        .removeClass('glyphicon-ok')
+                        .addClass('glyphicon-remove')
                         .show();
+
         },
 
         /**
@@ -334,12 +350,24 @@
          * @param {jQuery} $field The field element
          */
         removeError: function($field, validatorName) {
-            $field
-                .parents('.form-group')
+            var $parent = $field.parents('.form-group'),
+                $errors = $parent.find('.help-block[data-bs-validator]');
+
+            // Hide error element
+            $errors
+                .filter('[data-bs-validator="' + validatorName + '"]')
+                    .hide();
+
+            // If the field is valid then show the "ok" icon
+            if ($errors.filter(function() { return 'block' == $(this).css('display'); }).length == 0) {
+                $parent
                     .removeClass('has-error')
                     .addClass('has-success')
-                    .find('.help-block[data-bs-validator="' + validatorName + '"]')
-                        .hide();
+                    .find('.form-control-feedback')
+                        .removeClass('glyphicon-remove')
+                        .addClass('glyphicon-ok')
+                        .show();
+            }
         }
     };
 

src/js/bootstrapValidator.js

@@ -164,6 +164,14 @@
                         .appendTo($parent);
                 }
             }
+
+            // Prepare the feedback icons
+            // Available from Bootstrap 3.1 (http://getbootstrap.com/css/#forms-control-validation)
+            $parent.addClass('has-feedback');
+            $('<span/>')
+                .css('display', 'none')
+                .addClass('glyphicon form-control-feedback')
+                .insertAfter($(fields[fields.length - 1]));
         },
 
         /**
@@ -317,14 +325,22 @@
                 validator = this.options.fields[field].validators[validatorName],
                 message   = validator.message || this.options.message;
 
-            // Add has-error class to parent element
             $field
                 .parents('.form-group')
+                    // Add has-error class to parent element
                     .removeClass('has-success')
                     .addClass('has-error')
+                    // Show error element
                     .find('.help-block[data-bs-validator="' + validatorName + '"]')
                         .html(message)
+                        .show()
+                        .end()
+                    // Show feedback icon
+                    .find('.form-control-feedback')
+                        .removeClass('glyphicon-ok')
+                        .addClass('glyphicon-remove')
                         .show();
+
         },
 
         /**
@@ -333,12 +349,24 @@
          * @param {jQuery} $field The field element
          */
         removeError: function($field, validatorName) {
-            $field
-                .parents('.form-group')
+            var $parent = $field.parents('.form-group'),
+                $errors = $parent.find('.help-block[data-bs-validator]');
+
+            // Hide error element
+            $errors
+                .filter('[data-bs-validator="' + validatorName + '"]')
+                    .hide();
+
+            // If the field is valid then show the "ok" icon
+            if ($errors.filter(function() { return 'block' == $(this).css('display'); }).length == 0) {
+                $parent
                     .removeClass('has-error')
                     .addClass('has-success')
-                    .find('.help-block[data-bs-validator="' + validatorName + '"]')
-                        .hide();
+                    .find('.form-control-feedback')
+                        .removeClass('glyphicon-remove')
+                        .addClass('glyphicon-ok')
+                        .show();
+            }
         }
     };