Bind validation of a control on keypress using Valdr module in AngularJS

Question

I am using Valdr module to validate my form, it is working very well and validates the control content when i press tab, however I wanted to validate the control content while typing (keypress).

Your help is highly appreciated.

Answer 1

valdr is implemented as AngularJS validator. This means the validation happens by default on keypress when the ngModel is updated.

It is possible that you changed this behaviour in your app by configuring ngModelOptions to update the model on blur.

If this is not the case, you most likely have to change your CSS. This is how it is intended to control the visibility of validation messages.

The following CSS would show the valdr messages as soon as the user starts typing in the field:

.valdr-message {
  display: none;
}

.valdr-message.ng-invalid.ng-dirty {
  display: block;
}