Validar campos después de que el usuario haya dejado un campo

Con AngularJS, puedo usar ng-pristineo ng-dirtypara detectar si el usuario ha ingresado al campo. Sin embargo, quiero hacer la validación del lado del cliente solo después de que el usuario haya abandonado el área de campo. Esto se debe a que cuando un usuario ingresa a un campo como correo electrónico o teléfono, siempre recibirá un error hasta que haya terminado de escribir su correo electrónico completo, y esta no es una experiencia de usuario óptima.

Ejemplo

ACTUALIZAR:

Angular ahora se envía con un evento de desenfoque personalizado: https://docs.angularjs.org/api/ng/directive/ngBlur

Angular 1.3 ahora tiene ng-model-options, y puede configurar la opción, { 'updateOn': 'blur'}por ejemplo, e incluso puede eliminar el rebote, cuando el uso es escribir demasiado rápido o si desea guardar algunas operaciones DOM costosas (como escribir un modelo a varios lugares DOM y no desea que ocurra un ciclo de $ digest con cada tecla presionada)

https://docs.angularjs.org/guide/forms#custom-triggers y https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates

De forma predeterminada, cualquier cambio en el contenido activará una actualización del modelo y la validación del formulario. Puede anular este comportamiento utilizando la directiva ngModelOptions para enlazar solo a una lista específica de eventos. Es decir, ng-model-options = "{updateOn: 'blur'}" se actualizará y validará solo después de que el control pierda el foco. Puede configurar varios eventos usando una lista delimitada por espacios. Es decir, ng-model-options = "{updateOn: 'mousedown blur'}"

Y rebotar

Puede retrasar la actualización / validación del modelo utilizando la tecla antirrebote con la directiva ngModelOptions. Este retraso también se aplicará a analizadores, validadores y marcas de modelo como $ dirty o $ pristine.

Es decir, ng-model-options = "{debounce: 500}" esperará medio segundo desde el último cambio de contenido antes de activar la actualización del modelo y la validación del formulario.

A partir de la versión 1.3.0, esto se puede hacer fácilmente $touched, lo cual es cierto después de que el usuario haya abandonado el campo.

<p ng-show="form.field.$touched && form.field.$invalid">Error</p>

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Resolví esto ampliando lo que sugirió @jlmcdonald. Creé una directiva que se aplicaría automáticamente a todos los elementos de entrada y selección:

var blurFocusDirective = function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, elm, attr, ctrl) {
            if (!ctrl) {
                return;
            }

            elm.on('focus', function () {
                elm.addClass('has-focus');

                scope.$apply(function () {
                    ctrl.hasFocus = true;
                });
            });

            elm.on('blur', function () {
                elm.removeClass('has-focus');
                elm.addClass('has-visited');

                scope.$apply(function () {
                    ctrl.hasFocus = false;
                    ctrl.hasVisited = true;
                });
            });

            elm.closest('form').on('submit', function () {
                elm.addClass('has-visited');

                scope.$apply(function () {
                    ctrl.hasFocus = false;
                    ctrl.hasVisited = true;
                });
            });

        }
    };
};

app.directive('input', blurFocusDirective);
app.directive('select', blurFocusDirective);

Esto agregará has-focusy has-visitedclases a varios elementos a medida que el usuario se enfoca / visita los elementos. Luego puede agregar estas clases a sus reglas CSS para mostrar errores de validación:

input.has-visited.ng-invalid:not(.has-focus) {
    background-color: #ffeeee;   
}

Esto funciona bien en el sentido de que los elementos aún obtienen $ propiedades no válidas, etc., pero el CSS se puede usar para brindar al usuario una mejor experiencia.

Me las arreglé para hacer esto con un poco de CSS bastante simple. Esto requiere que los mensajes de error sean hermanos de la entrada con la que se relacionan y que tengan una clase de error.

:focus ~ .error {
    display:none;
}

Después de cumplir con esos dos requisitos, esto ocultará cualquier mensaje de error relacionado con un campo de entrada enfocado, algo que creo que angularjs debería estar haciendo de todos modos. Parece un descuido.

Esto parece estar implementado como estándar en las versiones más nuevas de angular.

Las clases ng-untouched y ng-touch se establecen respectivamente antes y después de que el usuario se haya centrado en un elemento validado.

CSS

input.ng-touched.ng-invalid {
   border-color: red;
}

Con respecto a la solución de @ lambinator ... recibí el siguiente error en angular.js 1.2.4:

Error: [$ rootScope: inprog] $ digest ya está en curso

No estoy seguro de si hice algo mal o si se trata de un cambio en Angular, pero la eliminación de las scope.$applydeclaraciones resolvió el problema y las clases / estados aún se actualizan.

Si también está viendo este error, pruebe lo siguiente:

var blurFocusDirective = function () {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, elm, attr, ctrl) {
      if (!ctrl) {
        return;
      }
      elm.on('focus', function () {
        elm.addClass('has-focus');
        ctrl.$hasFocus = true;
      });

      elm.on('blur', function () {
        elm.removeClass('has-focus');
        elm.addClass('has-visited');
        ctrl.$hasFocus = false;
        ctrl.$hasVisited = true;
      });

      elm.closest('form').on('submit', function () {
        elm.addClass('has-visited');

        scope.$apply(function () {
          ctrl.hasFocus = false;
          ctrl.hasVisited = true;
        });
      });
    }
  };
};
app.directive('input', blurFocusDirective);
app.directive('select', blurFocusDirective);

Podría funcionar para usted escribir una directiva personalizada que envuelva el método javascript blur () (y ejecute una función de validación cuando se active); hay un problema de Angular que tiene un ejemplo (así como una directiva genérica que puede vincularse a otros eventos que no son compatibles de forma nativa con Angular):

https://github.com/angular/angular.js/issues/1277

Si no desea seguir esa ruta, su otra opción sería configurar $ watch en el campo, activando nuevamente la validación cuando el campo se completa.

Para profundizar más en las respuestas dadas, puede simplificar el etiquetado de entrada utilizando pseudoclases CSS3 y solo marcando los campos visitados con una clase para retrasar la visualización de los errores de validación hasta que el usuario pierda el enfoque en el campo:

(El ejemplo requiere jQuery)

JavaScript

module = angular.module('app.directives', []);
module.directive('lateValidateForm', function () {
    return {
        restrict: 'AC',
        link: function (scope, element, attrs) {
            $inputs = element.find('input, select, textarea');

            $inputs.on('blur', function () {
                $(this).addClass('has-visited');
            });

            element.on('submit', function () {
                $inputs.addClass('has-visited');
            });
        }
    };
});

CSS

input.has-visited:not(:focus):required:invalid,
textarea.has-visited:not(:focus):required:invalid,
select.has-visited:not(:focus):required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

HTML

<form late-validate-form name="userForm">
  <input type="email" name="email" required />
</form>

basado en la respuesta de @nicolas .. CSS puro debería ser el truco, solo mostrará el mensaje de error en el desenfoque

<input type="email" id="input-email" required
               placeholder="Email address" class="form-control" name="email"
               ng-model="userData.email">
        <p ng-show="form.email.$error.email" class="bg-danger">This is not a valid email.</p>

CSS

.ng-invalid:focus ~ .bg-danger {
     display:none;
}

Aquí hay un ejemplo que usa ng-messages (disponible en angular 1.3) y una directiva personalizada.

El mensaje de validación se muestra en desenfoque la primera vez que el usuario abandona el campo de entrada, pero cuando corrige el valor, el mensaje de validación se elimina inmediatamente (ya no en desenfoque).

JavaScript

myApp.directive("validateOnBlur", [function() {
    var ddo = {
        restrict: "A",
        require: "ngModel",
        scope: {},
        link: function(scope, element, attrs, modelCtrl) {
            element.on('blur', function () {
                modelCtrl.$showValidationMessage = modelCtrl.$dirty;
                scope.$apply();
            });
        }
    };
    return ddo;
}]);

HTML

<form name="person">
    <input type="text" ng-model="item.firstName" name="firstName" 
        ng-minlength="3" ng-maxlength="20" validate-on-blur required />
    <div ng-show="person.firstName.$showValidationMessage" ng-messages="person.firstName.$error">
        <span ng-message="required">name is required</span>
        <span ng-message="minlength">name is too short</span>
        <span ng-message="maxlength">name is too long</span>
    </div>
</form>

PD. No olvide descargar e incluir ngMessages en su módulo:

var myApp = angular.module('myApp', ['ngMessages']);

ng-model-options en AngularJS 1.3 (beta al momento de escribir este artículo) está documentado para admitir {updateOn: 'blur'}. Para versiones anteriores, algo como lo siguiente funcionó para mí:

myApp.directive('myForm', function() {
  return {
    require: 'form',
    link: function(scope, element, attrs, formController) {
      scope.validate = function(name) {
        formController[name].isInvalid
            = formController[name].$invalid;
      };
    }
  };
});

Con una plantilla como esta:

<form name="myForm" novalidate="novalidate" data-my-form="">
<input type="email" name="eMail" required="required" ng-blur="validate('eMail')" />
<span ng-show="myForm.eMail.isInvalid">Please enter a valid e-mail address.</span>
<button type="submit">Submit Form</button>
</form>

Usar estado del campo $ tocado El campo se ha tocado para esto como se muestra en el siguiente ejemplo.

<div ng-show="formName.firstName.$touched && formName.firstName.$error.required">
    You must enter a value
</div>

Puede configurar dinámicamente la clase css has-error (asumiendo que está usando bootstrap) usando ng-class y una propiedad en el alcance del controlador asociado:

plunkr: http://plnkr.co/edit/HYDlaTNThZE02VqXrUCH?p=info

HTML:

<div ng-class="{'has-error': badEmailAddress}">
    <input type="email" class="form-control" id="email" name="email"
        ng-model="email" 
        ng-blur="emailBlurred(email.$valid)">
</div>

Controlador:

$scope.badEmailAddress = false;

$scope.emailBlurred = function (isValid) {
    $scope.badEmailAddress = !isValid;
};

Si usa bootstrap 3 y lesscss, puede habilitar la validación de desenfoque con el siguiente fragmento menos:

:focus ~ .form-control-feedback.glyphicon-ok {
  display:none;
}

:focus ~ .form-control-feedback.glyphicon-remove {
  display:none;
}

.has-feedback > :focus {
  & {
    .form-control-focus();
  }
}

outUsé una directiva. Aquí está el código:

app.directive('onBlurVal', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, controller) {

            element.on('focus', function () {
                element.next().removeClass('has-visited');
                element.next().addClass('has-focus');
            });

            element.on('blur', function () {

                element.next().removeClass('has-focus');
                element.next().addClass('has-visited');
            });
        }
    }
})

Todo mi control de entrada tiene un elemento de intervalo como elemento siguiente, que es donde se muestra mi mensaje de validación y, por lo tanto, la directiva como atributo se agrega a cada control de entrada.

También tengo (opcional) .has-focus y la clase css visitada en mi archivo css al que se hace referencia en la directiva.

NOTA: recuerde agregar 'on-blur-val' exactamente de esta manera a su control de entrada sin los apóstrofos

Al usar ng-focus , puede lograr su objetivo. debe proporcionar ng-focus en su campo de entrada. Y mientras escribe sus derivadas ng-show, también debe escribir una lógica que no sea igual. Como el siguiente código:

<input type="text" class="form-control" name="inputPhone" ng-model="demo.phoneNumber" required ng-focus> <div ng-show="demoForm.inputPhone.$dirty && demoForm.inputPhone.$invalid && !demoForm.inputPhone.$focused"></div>

Podemos usar las funciones onfocus y onblur. Sería mejor y más sencillo.

<body ng-app="formExample">
  <div ng-controller="ExampleController">
  <form novalidate class="css-form">
    Name: <input type="text" ng-model="user.name" ng-focus="onFocusName='focusOn'" ng-blur="onFocusName=''" ng-class="onFocusName" required /><br />
    E-mail: <input type="email" ng-model="user.email" ng-focus="onFocusEmail='focusOn'" ng-blur="onFocusEmail=''" ng-class="onFocusEmail" required /><br />
  </form>
</div>

<style type="text/css">
 .css-form input.ng-invalid.ng-touched {
    border: 1px solid #FF0000;
    background:#FF0000;
   }
 .css-form input.focusOn.ng-invalid {
    border: 1px solid #000000;
    background:#FFFFFF;
 }
</style>

Intenta aquí:

http://plnkr.co/edit/NKCmyru3knQiShFZ96tp?p=preview