#72, #86: Add setNotValidated method to force the plugin validate the field

demo/date.html

@@ -11,14 +11,19 @@
     <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
 
     <!-- Support datetime picker plugin: http://eonasdan.github.io/bootstrap-datetimepicker/ -->
-    <link rel="stylesheet" href="http://eonasdan.github.io/bootstrap-datetimepicker/styles/bootstrap-datetimepicker.min.css"/>
-    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment-2.4.0.js"></script>
+    <link rel="stylesheet" href="http://eonasdan.github.io/bootstrap-datetimepicker/content/bootstrap-datetimepicker.css"/>
+    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
     <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
 
     <style type="text/css">
     /* Override to make the feedback icons shown properly */
-    .bootstrap-validator-datetime .form-control-feedback {
-        right: -30px !important;
+    .form-horizontal .has-feedback .form-control-feedback {
+        top: 0;
+        right: -15px;
+    }
+    .form-horizontal .has-feedback .input-group .form-control-feedback {
+        top: 0;
+        right: -30px;
     }
     </style>
 </head>
@@ -62,11 +67,11 @@
                         </div>
 
                         <!-- datetime picker -->
-                        <div class="form-group bootstrap-validator-datetime">
+                        <div class="form-group">
                             <label class="col-lg-3 control-label"><a href="http://eonasdan.github.io/bootstrap-datetimepicker/">DateTime Picker</a> (MM/DD/YYYY h:m A)</label>
                             <div class="col-lg-5">
                                 <div class="input-group date" id="datetimePicker">
-                                    <input type="text" class="form-control" name="datetimePicker" />
+                                    <input type="text" class="form-control" name="datetimePicker" value="03/12/2001 10:12 PM" />
                                     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                 </div>
                                 <span class="help-block">Choose a leap year</span>
@@ -127,19 +132,17 @@ $(document).ready(function() {
             },
             datetimePicker: {
                 validators: {
-//                    date: {
-//                        format: 'MM/DD/YYYY h:m A'
-//                    },
+                    date: {
+                        format: 'MM/DD/YYYY h:m A'
+                    },
                     callback: {
                         callback: function(value, validator) {
                             // m is moment object
                             var m = new moment(value, 'MM/DD/YYYY h:m A', true);
-                            console.log(value, m.isValid());
                             if (!m.isValid()) {
                                 return false;
                             }
                             var year = m.years();
-                            console.log(year);
                             return (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0));
                         },
                         message: 'Chosen year is not a leap one'
@@ -149,9 +152,12 @@ $(document).ready(function() {
         }
     });
 
-    $('#datetimePicker').on('change.dp', function(e) {
+    $('#datetimePicker').on('dp.change', function(e) {
         // Validate the date when user change it
-        $('#defaultForm').data('bootstrapValidator').validateField('datetimePicker');
+        $('#defaultForm')
+            .data('bootstrapValidator')             // Get the bootstrapValidator instance
+            .setNotValidated('datetimePicker')      // Mark the field as not validated, so it'll be re-validated when the user change date
+            .validateField('datetimePicker');       // Validate the field
     });
 });
 </script>

dist/js/bootstrapValidator.js

@@ -206,9 +206,7 @@
                 type  = fields.attr('type'),
                 event = ('radio' == type || 'checkbox' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup';
             fields.on(event, function() {
-                for (var v in that.options.fields[field].validators) {
-                    that.results[field][v] = that.STATUS_NOT_VALIDATED;
-                }
+                that.setNotValidated(field);
             });
         },
 
@@ -465,6 +463,22 @@
             return this;
         },
 
+        /**
+         * Mark a field as not validated yet
+         * The plugin doesn't re-validate a field if it is marked as valid.
+         * In some cases, we need to force the plugin validate it again
+         *
+         * @param {String} field The field name
+         * @returns {BootstrapValidator}
+         */
+        setNotValidated: function(field) {
+            for (var v in this.options.fields[field].validators) {
+                this.results[field][v] = this.STATUS_NOT_VALIDATED;
+            }
+
+            return this;
+        },
+
         // Useful APIs which aren't used internally
 
         /**

src/js/bootstrapValidator.js

@@ -205,9 +205,7 @@
                 type  = fields.attr('type'),
                 event = ('radio' == type || 'checkbox' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup';
             fields.on(event, function() {
-                for (var v in that.options.fields[field].validators) {
-                    that.results[field][v] = that.STATUS_NOT_VALIDATED;
-                }
+                that.setNotValidated(field);
             });
         },
 
@@ -464,6 +462,22 @@
             return this;
         },
 
+        /**
+         * Mark a field as not validated yet
+         * The plugin doesn't re-validate a field if it is marked as valid.
+         * In some cases, we need to force the plugin validate it again
+         *
+         * @param {String} field The field name
+         * @returns {BootstrapValidator}
+         */
+        setNotValidated: function(field) {
+            for (var v in this.options.fields[field].validators) {
+                this.results[field][v] = this.STATUS_NOT_VALIDATED;
+            }
+
+            return this;
+        },
+
         // Useful APIs which aren't used internally
 
         /**