Validasi bidang setelah pengguna meninggalkan bidang

Dengan AngularJS, saya dapat menggunakan ng-pristineatau ng-dirtyuntuk mendeteksi jika pengguna telah memasuki lapangan. Namun, saya ingin melakukan validasi sisi klien hanya setelah pengguna meninggalkan area lapangan. Ini karena ketika pengguna memasukkan bidang seperti email atau telepon, mereka akan selalu mendapatkan kesalahan sampai mereka selesai mengetik email lengkap mereka, dan ini bukan pengalaman pengguna yang optimal.

Contoh

MEMPERBARUI:

Angular sekarang dikirimkan dengan acara blur khusus: https://docs.angularjs.org/api/ng/directive/ngBlur

Angular 1.3 sekarang memiliki ng-model-options, dan Anda dapat menyetel opsi ke { 'updateOn': 'blur'}misalnya, dan Anda bahkan dapat menolak, ketika penggunaan terlalu cepat, atau Anda ingin menyimpan beberapa operasi DOM yang mahal (seperti penulisan model ke beberapa tempat DOM dan Anda tidak ingin siklus $ digest terjadi pada setiap tombol mati)

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

Secara default, setiap perubahan pada konten akan memicu pembaruan model dan validasi formulir. Anda bisa mengganti perilaku ini menggunakan direktif ngModelOptions untuk mengikat hanya ke daftar kejadian yang ditentukan. Ie ng-model-options = "{updateOn: 'blur'}" akan memperbarui dan memvalidasi hanya setelah kontrol kehilangan fokus. Anda dapat menyetel beberapa acara menggunakan daftar yang dipisahkan spasi. Yaitu ng-model-options = "{updateOn: 'mousedown blur'}"

Dan lepaskan

Anda bisa menunda pembaruan / validasi model dengan menggunakan kunci debounce dengan direktif ngModelOptions. Penundaan ini juga berlaku untuk parser, validator, dan flag model seperti $ dirty atau $ pristine.

Ie ng-model-options = "{debounce: 500}" akan menunggu setengah detik sejak konten terakhir berubah sebelum memicu pembaruan model dan validasi formulir.

Dari versi 1.3.0 ini dapat dengan mudah dilakukan $touched, yang benar setelah pengguna meninggalkan lapangan.

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

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

Saya menyelesaikan ini dengan memperluas apa yang disarankan @jlmcdonald. Saya membuat arahan yang secara otomatis akan diterapkan ke semua elemen input dan pilih:

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

Ini akan menambah has-focusdan has-visitedmengklasifikasikan berbagai elemen saat pengguna memfokuskan / mengunjungi elemen. Anda kemudian dapat menambahkan kelas ini ke aturan CSS Anda untuk menunjukkan kesalahan validasi:

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

Ini berfungsi dengan baik karena elemen masih mendapatkan $ properti tidak valid dll, tetapi CSS dapat digunakan untuk memberikan pengalaman yang lebih baik kepada pengguna.

Saya berhasil melakukan ini dengan sedikit CSS yang cukup sederhana. Hal ini mengharuskan pesan kesalahan menjadi saudara dari input yang terkait dengannya, dan memiliki kelas error.

:focus ~ .error {
    display:none;
}

Setelah memenuhi kedua persyaratan tersebut, ini akan menyembunyikan pesan kesalahan apa pun yang terkait dengan bidang input terfokus, sesuatu yang menurut saya harus dilakukan angularjs. Sepertinya pengawasan.

Ini tampaknya diterapkan sebagai standar dalam versi sudut yang lebih baru.

Kelas ng-untouched dan ng-touch ditetapkan masing-masing sebelum dan setelah pengguna memiliki fokus pada elemen yang divalidasi.

CSS

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

Mengenai solusi @ lambinator ... Saya mendapatkan kesalahan berikut di angular.js 1.2.4:

Kesalahan: [$ rootScope: inprog] $ digest sedang berlangsung

Saya tidak yakin apakah saya melakukan sesuatu yang salah atau jika ini adalah perubahan di Angular, tetapi menghapus scope.$applypernyataan menyelesaikan masalah dan kelas / negara bagian masih diperbarui.

Jika Anda juga melihat kesalahan ini, cobalah yang berikut ini:

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

Mungkin berhasil bagi Anda untuk menulis perintah khusus yang membungkus metode javascript blur () (dan menjalankan fungsi validasi saat dipicu); ada masalah Angular yang memiliki sampel (serta arahan umum yang dapat mengikat ke acara lain yang tidak didukung oleh Angular):

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

Jika Anda tidak ingin pergi ke rute itu, pilihan Anda yang lain adalah mengatur $ watch di lapangan, lagi-lagi memicu validasi saat bidang diisi.

Untuk mempelajari lebih lanjut jawaban yang diberikan, Anda dapat menyederhanakan pemberian tag input dengan menggunakan pseudo-class CSS3 dan hanya menandai bidang yang dikunjungi dengan kelas untuk menunda menampilkan kesalahan validasi hingga pengguna kehilangan fokus pada bidang:

(Contoh membutuhkan 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>

berdasarkan jawaban @nicolas .. Pure CSS harus triknya, itu hanya akan menampilkan pesan kesalahan pada 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;
}

Berikut adalah contoh penggunaan ng-messages (tersedia dalam angular 1.3) dan custom directive.

Pesan validasi ditampilkan dalam mode blur untuk pertama kalinya pengguna meninggalkan kolom input, tetapi ketika dia mengoreksi nilainya, pesan validasi segera dihapus (tidak buram lagi).

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. Jangan lupa untuk mendownload dan menyertakan ngMessages dalam modul Anda:

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

ng-model-options di AngularJS 1.3 (versi beta saat tulisan ini dibuat) didokumentasikan untuk mendukung {updateOn: 'blur'}. Untuk versi sebelumnya, sesuatu seperti berikut ini berhasil untuk saya:

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

Dengan template seperti ini:

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

Gunakan status bidang $ tersentuh Bidang telah disentuh untuk ini seperti yang ditunjukkan pada contoh di bawah ini.

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

Anda dapat secara dinamis menyetel kelas has-error css (dengan asumsi Anda menggunakan bootstrap) menggunakan ng-class dan properti pada lingkup pengontrol terkait:

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>

Pengontrol:

$scope.badEmailAddress = false;

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

Jika Anda menggunakan bootstrap 3 dan lesscss, Anda dapat mengaktifkan validasi blur dengan sedikit cuplikan berikut:

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

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

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

outI menggunakan arahan. Ini kodenya:

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

Semua kontrol input saya memiliki elemen span sebagai elemen berikutnya, di mana pesan validasi saya ditampilkan dan direktif sebagai atribut ditambahkan ke setiap kontrol input.

Saya juga memiliki kelas css (opsional) .has-focus dan has-visiting di file css saya yang Anda lihat direferensikan dalam direktif.

CATATAN: ingatlah untuk menambahkan 'on-blur-val' persis seperti ini ke kontrol masukan Anda tanpa apostrof

Dengan menggunakan ng-focus Anda dapat mencapai tujuan Anda. Anda perlu memberikan fokus ng di bidang masukan Anda. Dan saat menulis turunan ng-show Anda, Anda harus menulis logika yang tidak sama juga. Seperti kode di bawah ini:

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

Kita bisa menggunakan fungsi onfocus dan onblur. Sederhana dan terbaik.

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

Coba di sini:

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