Convalida i campi dopo che l'utente ha lasciato un campo

Con AngularJS, posso utilizzare ng-pristineo ng-dirtyper rilevare se l'utente è entrato nel campo. Tuttavia, desidero eseguire la convalida lato client solo dopo che l'utente ha lasciato l'area del campo. Questo perché quando un utente entra in un campo come e-mail o telefono, riceverà sempre un errore fino a quando non avrà completato la digitazione completa dell'e-mail e questa non è un'esperienza utente ottimale.

Esempio

AGGIORNARE:

Angular ora viene fornito con un evento di sfocatura personalizzato: https://docs.angularjs.org/api/ng/directive/ngBlur

Angular 1.3 ora ha ng-model-options e puoi impostare l'opzione su, { 'updateOn': 'blur'}ad esempio, e puoi persino annullare il rimbalzo, quando l'uso sta digitando troppo velocemente o vuoi salvare alcune costose operazioni DOM (come la scrittura di un modello a più posizioni DOM e non vuoi che un ciclo $ digest avvenga su ogni tasto premuto)

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

Per impostazione predefinita, qualsiasi modifica al contenuto attiverà un aggiornamento del modello e la convalida del modulo. È possibile sovrascrivere questo comportamento utilizzando la direttiva ngModelOptions per eseguire il binding solo all'elenco di eventi specificato. Ie ng-model-options = "{updateOn: 'blur'}" verrà aggiornato e convalidato solo dopo che il controllo perde il focus. È possibile impostare diversi eventi utilizzando un elenco delimitato da spazi. Ie ng-model-options = "{updateOn: 'mousedown blur'}"

E antirimbalzo

È possibile ritardare l'aggiornamento / convalida del modello utilizzando la chiave antirimbalzo con la direttiva ngModelOptions. Questo ritardo si applicherà anche a parser, validatori e flag di modello come $ dirty o $ pristine.

Ie ng-model-options = "{debounce: 500}" aspetterà mezzo secondo dall'ultima modifica del contenuto prima di attivare l'aggiornamento del modello e la convalida del modulo.

Dalla versione 1.3.0 questo può essere fatto facilmente $touched, il che è vero dopo che l'utente ha lasciato il campo.

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

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

Ho risolto questo problema espandendo ciò che ha suggerito @jlmcdonald. Ho creato una direttiva che verrebbe automaticamente applicata a tutti gli elementi di input e di selezione:

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

Questo aggiungerà has-focuse has-visitedclassi a vari elementi mentre l'utente si concentra / visita gli elementi. È quindi possibile aggiungere queste classi alle regole CSS per mostrare errori di convalida:

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

Funziona bene in quanto gli elementi ottengono ancora $ proprietà non valide, ecc., Ma il CSS può essere utilizzato per offrire all'utente un'esperienza migliore.

Sono riuscito a farlo con un po 'di CSS piuttosto semplice. Ciò richiede che i messaggi di errore siano fratelli dell'input a cui si riferiscono e che abbiano una classe di error.

:focus ~ .error {
    display:none;
}

Dopo aver soddisfatto questi due requisiti, questo nasconderà qualsiasi messaggio di errore relativo a un campo di input focalizzato, qualcosa che penso che angularjs dovrebbe fare comunque. Sembra una svista.

Questo sembra essere implementato come standard nelle versioni più recenti di angular.

Le classi ng-untouched e ng-touched vengono impostate rispettivamente prima e dopo che l'utente si è concentrato su un elemento convalidato.

CSS

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

Per quanto riguarda la soluzione di @ lambinator ... stavo ottenendo il seguente errore in angular.js 1.2.4:

Errore: [$ rootScope: inprog] $ digest già in corso

Non sono sicuro di aver fatto qualcosa di sbagliato o se si tratta di un cambiamento in Angular, ma la rimozione delle scope.$applyistruzioni ha risolto il problema e le classi / stati vengono ancora aggiornati.

Se visualizzi anche questo errore, prova quanto segue:

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

Potrebbe funzionare per te scrivere una direttiva personalizzata che racchiuda il metodo javascript blur () (ed esegue una funzione di convalida quando attivata); c'è un problema Angular che ne ha uno di esempio (oltre a una direttiva generica che può legarsi ad altri eventi non supportati nativamente da Angular):

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

Se non vuoi seguire quella strada, l'altra opzione sarebbe quella di impostare $ watch sul campo, attivando nuovamente la convalida quando il campo è compilato.

Per riprendere ulteriormente le risposte fornite, puoi semplificare la codifica degli input utilizzando le pseudo-classi CSS3 e contrassegnando solo i campi visitati con una classe per ritardare la visualizzazione degli errori di convalida fino a quando l'utente non ha perso il focus sul campo:

(L'esempio richiede 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>

basato sulla risposta di @nicolas .. Pure CSS dovrebbe essere il trucco, mostrerà solo il messaggio di errore su blur

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

Ecco un esempio che utilizza ng-messages (disponibile in angular 1.3) e una direttiva personalizzata.

Il messaggio di convalida viene visualizzato sulla sfocatura per la prima volta che l'utente lascia il campo di input, ma quando corregge il valore, il messaggio di convalida viene rimosso immediatamente (non più sulla sfocatura).

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. Non dimenticare di scaricare e includere ngMessages nel tuo modulo:

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

ng-model-options in AngularJS 1.3 (beta al momento della stesura di questo documento) è documentato per supportare {updateOn: 'blur'}. Per le versioni precedenti, qualcosa come il seguente ha funzionato per me:

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

Con un modello come questo:

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

Usa stato campo $ toccato Il campo è stato toccato per questo come mostrato nell'esempio sotto.

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

Puoi impostare dinamicamente la classe css has-error (supponendo che tu stia usando bootstrap) usando ng-class e una proprietà nell'ambito del controller associato:

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>

Controller:

$scope.badEmailAddress = false;

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

Se usi bootstrap 3 e lesscss puoi abilitare la convalida della sfocatura con il seguente frammento di meno:

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

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

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

out Ho usato una direttiva. Ecco il codice:

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

Tutto il mio controllo di input ha un elemento span come elemento successivo, che è dove viene visualizzato il mio messaggio di convalida e quindi la direttiva come attributo viene aggiunta a ciascun controllo di input.

Ho anche (opzionale) .has-focus e has-visiting css class nel mio file css che vedi essere referenziato nella direttiva.

NOTA: ricordarsi di aggiungere "on-blur-val" esattamente in questo modo al controllo di input senza gli apostrofi

Usando ng-focus puoi raggiungere il tuo obiettivo. devi fornire ng-focus nel tuo campo di input. E mentre scrivi i tuoi derivati ​​ng-show devi scrivere anche una logica non uguale. Come il codice seguente:

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

Possiamo usare le funzioni onfocus e onblur. Sarebbe semplice e migliore.

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

Prova qui:

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