BootstrapValidationDecorator glitch when editing

[Gusi]

There is a minor (but frustrating) glitch when editing a previously touched field.

When the typing starts, the $invalid property of the field is set to true, so the watch inside the bootstrapValidationDecorator fires and the toggleClass method sets the "has-error" class to the decorator. One second after the typing stopped, the $invalid is set to false so the watch fires again and removes the "has-error" class.

The result is that while typing, the element is decorated in red (as I said, it only happens if the field has been previously touched).

I'm trying to figure out how to fix this, but can't find the solution. Any ideas?

(In summary, I think the solution is as simple as detecting when the field is inside the delay of 1 second to avoid showing the error during that time)

[ghiscoding]

That is indeed the way Angular-Validation was programmed, I set the validation to false when starting (before getting back validation result) and also use the $touched so that it doesn't show as invalid the first time user goes to the page. I don't see any other ways of dealing with this.

[Gusi]

Hi and thanks for your quick reply!

The problem is that testing your examples in plunker (http://plnkr.co/jADq7H) the behaviour is totally different. When the user starts typing the error message and decorations dissappears (even if the current input is invalid) and after the timeout, the errors and decorator are shown.

I was expecting the same behavior using bootstrapValidationDecorator, but I can find out which variable to evalutate to check if the input is "inside" the timeout timer (of course, without modifiying the library source).

[ghiscoding]

I think that should take a look at the CSS styles that I use for the example.

For example, this piece of CSS code will only apply red when invalid, dirty & touched BUT not in focus

.ng-invalid.ng-dirty:not(:focus),
.ng-invalid.ng-touched:not(:focus) {
    border-color: #e74c3c;
}

[ghiscoding]

Closing for no response

[Gusi]

I tried everything I could but couldn't match the exact behaviour of the error message appearing in sync with the decorator being set in red. I was expecting someone could throw some more light but didn't happen.

At the end, and as I want to match exactly the same behaviour as the message appearing, I modified the source of updateErrorMsg and set a boolean value to self.ctrl indicating if the error message is visible. This way, the bootstrap decorator only has to monitor that boolean value to enable or disable the error class.

I would love to have this in the next version. What do you think about? I can do a PR if you want.

Thanks!

[Gusi]

Feel free to review it! #144

[ghiscoding]

There's already a boolean property in the updateErrorMsg() function, it's passed in the 2nd argument of the function which is an object type. Basically a call looks like this updateErrorMsg(msg, { isValid: false }) and you can see it use at line 487 of the validation-common.js file. However, it also requires that the element has 1 of these !attrs.isValid && (isSubmitted || self.ctrl.$dirty || self.ctrl.$touched || self.ctrl.revalidateCalled). Perhaps your element is not dirty and not touched? If that is the case, then call it with the isSubmitted flag as this updateErrorMsg(msg, { isValid: false, isSumitted: true }), then your error will show.

[ghiscoding]

Oh ok, now that I saw the commit, I understand your meaning. I might accept that, will review later. Thanks

[ghiscoding]

Merged and pushed a new version 1.5.14

[Gusi]

Thank you very much for accepting the PR.

Now the decorator works as simple as this. (wiki should be updated with this?)

(function() {   
   var bootstrapValidationDecorator = function() {
       return {
           scope: {
               bootstrapValidationDecorator:'@'
           },
           restrict: 'A',
           require:  '^form',
           link: function (scope, el, attrs, formCtrl) {
               scope.form = formCtrl; // no template so no need for that for now
               console.log(scope.form);

               if(scope.bootstrapValidationDecorator!=undefined && scope.bootstrapValidationDecorator!="") {
                   scope.fieldName = scope.bootstrapValidationDecorator;
               } else {                    
                   scope.fieldName = angular.element( el[0].querySelector("[name]") ).attr('name');
               }

               scope.$watch(
                   function(scope) {
                       return scope.form[scope.fieldName].errorMessageVisible; // NEW
                   },
                   function( newVal, oldVal ) {
                       if(newVal != oldVal){
                           el.toggleClass('has-error', newVal === true); // NEW
                       }
                   }
               );
           }
       }
   }
   angular.module('app').directive('bootstrapValidationDecorator', bootstrapValidationDecorator);

}());

[Gusi]

And a real working project with this working: http://beta2.everlaps.com/signup

Thanks again for your support and your fantastic library!

[ghiscoding]

Ah good, I see your use case. Nice looking form

I created a Wiki - IsErrorMessageVisible and after doing the Wiki, I think this flag should really have been called IsErrorMessageVisible but I guess it's ok. Thanks for the PR