Validar campos após o usuário ter deixado um campo

Com o AngularJS, posso usar ng-pristineou ng-dirtypara detectar se o usuário entrou no campo. No entanto, desejo fazer a validação do lado do cliente somente depois que o usuário tiver deixado a área de campo. Isso ocorre porque quando um usuário insere um campo como e-mail ou telefone, ele sempre receberá um erro até que tenha concluído a digitação de seu e-mail completo, e esta não é uma experiência de usuário ideal.

Exemplo

ATUALIZAR:

O Angular agora vem com um evento de desfoque personalizado: https://docs.angularjs.org/api/ng/directive/ngBlur

O Angular 1.3 agora tem opções de modelo de ng, e você pode definir a opção para, { 'updateOn': 'blur'}por exemplo, e você pode até debounce, quando o uso está digitando muito rápido, ou você deseja salvar algumas operações DOM caras (como a escrita de um modelo para vários locais DOM e você não quer um ciclo de $ digest acontecendo a cada tecla pressionada)

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

Por padrão, qualquer alteração no conteúdo acionará uma atualização do modelo e validação do formulário. Você pode substituir esse comportamento usando a diretiva ngModelOptions para vincular apenas a uma lista de eventos especificada. Ie ng-model-options = "{updateOn: 'blur'}" irá atualizar e validar somente depois que o controle perder o foco. Você pode definir vários eventos usando uma lista delimitada por espaço. Ie ng-model-options = "{updateOn: 'mousedown blur'}"

E debounce

Você pode atrasar a atualização / validação do modelo usando a chave debounce com a diretiva ngModelOptions. Esse atraso também se aplica a analisadores, validadores e sinalizadores de modelo como $ dirty ou $ pristine.

Ie ng-model-options = "{debounce: 500}" vai esperar meio segundo desde a última mudança de conteúdo antes de acionar a atualização do modelo e validação do formulário.

A partir da versão 1.3.0, isso pode ser feito facilmente com $touched, o que é verdade depois que o usuário sai do campo.

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

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

Resolvi isso expandindo o que @jlmcdonald sugeriu. Eu criei uma diretiva que seria aplicada automaticamente a todos os elementos de entrada e seleção:

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);

Isso adicionará has-focuse has-visitedclasses a vários elementos conforme o usuário foca / visita os elementos. Você pode então adicionar essas classes às suas regras CSS para mostrar erros de validação:

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

Isso funciona bem porque os elementos ainda obtêm $ propriedades inválidas etc., mas o CSS pode ser usado para dar ao usuário uma experiência melhor.

Consegui fazer isso com um pouco de CSS bem simples. Isso exige que as mensagens de erro sejam irmãs da entrada a que se relacionam e que tenham uma classe da qual error.

:focus ~ .error {
    display:none;
}

Depois de atender a esses dois requisitos, isso ocultará qualquer mensagem de erro relacionada a um campo de entrada focado, algo que acho que o angularjs deveria fazer de qualquer maneira. Parece um descuido.

Isso parece ser implementado como padrão nas versões mais recentes do angular.

As classes ng-untouched e ng -oked são definidas respectivamente antes e depois que o usuário teve o foco em um elemento validado.

CSS

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

Com relação à solução de @lambinator ... Eu estava recebendo o seguinte erro no angular.js 1.2.4:

Erro: [$ rootScope: inprog] $ digest já em andamento

Não tenho certeza se fiz algo errado ou se isso é uma alteração no Angular, mas remover as scope.$applyinstruções resolveu o problema e as classes / estados ainda estão sendo atualizados.

Se você também estiver vendo esse erro, tente o seguinte:

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);

Pode funcionar para você escrever uma diretiva personalizada que envolve o método blur () de javascript (e executa uma função de validação quando acionada); há um problema do Angular que tem um exemplo (bem como uma diretiva genérica que pode vincular a outros eventos não suportados nativamente pelo Angular):

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

Se você não quiser seguir esse caminho, sua outra opção seria configurar $ watch no campo, novamente acionando a validação quando o campo for preenchido.

Para aprender mais sobre as respostas fornecidas, você pode simplificar a marcação de entrada usando pseudo classes CSS3 e apenas marcando os campos visitados com uma classe para atrasar a exibição de erros de validação até que o usuário perca o foco no campo:

(O exemplo requer 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>

baseado na resposta do @nicolas. CSS puro deve funcionar, ele só mostrará a mensagem de erro no desfoque

<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;
}

Aqui está um exemplo usando ng-messages (disponível no angular 1.3) e uma diretiva personalizada.

A mensagem de validação é exibida em desfoque na primeira vez que o usuário deixa o campo de entrada, mas quando ele corrige o valor, a mensagem de validação é removida imediatamente (não está mais desfocada).

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>

PS. Não se esqueça de baixar e incluir ngMessages em seu módulo:

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

ng-model-options no AngularJS 1.3 (beta no momento desta escrita) está documentado para suportar {updateOn: 'blur'}. Para versões anteriores, algo como o seguinte funcionou para mim:

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

Com um modelo como este:

<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>

Use o estado do campo $ Touch O campo foi tocado para isso, conforme mostrado no exemplo abaixo.

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

Você pode definir dinamicamente a classe css has-error (supondo que você esteja usando bootstrap) usando ng-class e uma propriedade no escopo do controlador associado:

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;
};

Se você usar bootstrap 3 e lesscss, poderá ativar a validação de desfoque com o seguinte menos snippet:

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

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

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

outI usei uma diretiva. Aqui está o 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 o meu controle de entrada tem um elemento span como o próximo elemento, que é onde minha mensagem de validação é exibida e, portanto, a diretiva como um atributo é adicionada a cada controle de entrada.

Eu também tenho (opcional) as classes css .has-focus e has-Visit em meu arquivo css, que você vê sendo referenciado na diretiva.

NOTA: lembre-se de adicionar 'on-blur-val' exatamente desta forma ao seu controle de entrada sem os apóstrofos

Ao usar o ng-focus, você pode atingir seu objetivo. você precisa fornecer ng-focus em seu campo de entrada. E enquanto escreve seus derivados ng-show, você também tem que escrever uma lógica diferente. Como o código abaixo:

<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 as funções onfocus e onblur. Seria simples e melhor.

<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>

Experimente aqui:

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