web-dev-qa-db-ja.com

ユーザーがフィールドを離れた後にフィールドを検証する

AngularJSでは、ng-pristineまたはng-dirtyを使用して、ユーザーがフィールドに入力したかどうかを検出できます。ただし、ユーザーがフィールド領域を離れた後にのみクライアント側の検証を行います。これは、ユーザーが電子メールや電話などのフィールドに入ると、完全な電子メールの入力が完了するまで常にエラーがスローされるためであり、これは最適なユーザーエクスペリエンスではありません。

例

更新：

Angularにカスタムブラーイベントが付属するようになりました： https://docs.angularjs.org/api/ng/directive/ngBlur

formsangularjs
91
mcranston18

Angular 1.3にはng-model-optionsが追加されました。たとえば、オプションを{ 'updateOn': 'blur'}に設定できます。また、入力が速すぎる場合や、モデルなどの高価なDOM操作を保存したい場合は、デバウンスすることもできます複数のDOMの場所に書き込みますが、すべてのキーが押されるたびに$ digestサイクルが発生することは望ましくありません）

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

デフォルトでは、コンテンツを変更すると、モデルの更新とフォームの検証がトリガーされます。 ngModelOptionsディレクティブを使用してこの動作をオーバーライドし、指定されたイベントのリストのみにバインドできます。つまりng-model-options = "{updateOn： 'blur'}"は、コントロールがフォーカスを失った後にのみ更新および検証します。スペース区切りのリストを使用して、複数のイベントを設定できます。つまりng-model-options = "{updateOn： 'mousedown blur'}"

そしてデバウンス

NgModelOptionsディレクティブでデバウンスキーを使用すると、モデルの更新/検証を遅らせることができます。この遅延は、パーサー、バリデーター、および$ dirtyや$ pristineなどのモデルフラグにも適用されます。

つまりng-model-options = "{debounce：500}"は、最後のコンテンツの変更から0.5秒待ってから、モデルの更新とフォーム検証をトリガーします。

75
pocesar

バージョン1.3.0から、これは$touchedを使用して簡単に実行できます。これは、ユーザーがフィールドを離れた後はtrueです。

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

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

92
user1506145

@jlmcdonaldが提案したことを拡張することでこれを解決しました。すべての入力および選択要素に自動的に適用されるディレクティブを作成しました。

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

これにより、ユーザーが要素にフォーカス/アクセスすると、has-focusおよびhas-visitedクラスがさまざまな要素に追加されます。次に、これらのクラスをCSSルールに追加して、検証エラーを表示できます。

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

これは、要素がまだ$ invalidプロパティなどを取得するという点でうまく機能しますが、CSSを使用してユーザーにより良いエクスペリエンスを提供できます。

32
lambinator

私は、CSSの非常に単純なビットを使用してこれを行うことができました。これには、エラーメッセージが関連する入力の兄弟であり、errorのクラスを持つことが必要です。

:focus ~ .error {
    display:none;
}

これらの2つの要件を満たした後、これは、angularjsがやるべきことだと思うフォーカスされた入力フィールドに関連するエラーメッセージを非表示にします。見落としているようです。

16
nicholas

@ lambinator's solution ...に関して、angular.js 1.2.4で次のエラーが発生していました：

エラー：[$ rootScope：inprog] $ digestはすでに進行中です

私が何か間違ったことをしたのか、これがAngularの変更であるのかはわかりませんが、scope.$applyステートメントを削除すると問題が解決し、クラス/状態はまだ更新されています。

このエラーも表示される場合は、次のことを試してください。

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

これは、角度の新しいバージョンの標準として実装されているようです。

クラスng-untouchedおよびng-touchedは、ユーザーが検証済みの要素にフォーカスする前と後にそれぞれ設定されます。

CSS

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

Javascript blur（）メソッドをラップする（そしてトリガーされると検証関数を実行する）カスタムディレクティブを記述するとうまくいくかもしれません。サンプルAngularの問題（および、Angularがネイティブにサポートしていない他のイベントにバインドできる汎用ディレクティブ）があります。

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

そのルートに行きたくない場合、他のオプションは、フィールドに$ watchを設定し、フィールドがいっぱいになったときに検証をトリガーすることです。

2
jlmcdonald

Ng-messages（angular 1.3で利用可能）とカスタムディレクティブを使用した例を次に示します。

検証メッセージは、ユーザーが入力フィールドを初めて離れたときにぼかしで表示されますが、値を修正すると、検証メッセージはすぐに削除されます（ぼかしではなくなります）。

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。モジュールにngMessagesをダウンロードして含めることを忘れないでください：

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

与えられた答えをさらに理解するために、CSS3擬似クラスを使用し、ユーザーがフィールドにフォーカスを失うまで検証エラーの表示を遅らせるためにクラスで訪問済みフィールドのみをマークすることにより、入力タグ付けを簡素化できます。

（例には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>
2
Patrick Glandien

@nicolasの回答に基づく

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

angularJS 1.3のng-model-options（この記事の執筆時点ではベータ版）は、{updateOn： 'blur'}をサポートするために文書化されています。以前のバージョンでは、次のようなものがうまくいきました。

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

このようなテンプレートでは：

<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>
1
Terence Bandoian

フィールド状態を使用$ touched以下の例に示すように、このためにフィールドがタッチされています。

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

ng-focusを使用すると、目標を達成できます。入力フィールドにng-focusを提供する必要があります。また、ng-show派生物を作成する際には、等しくないロジックを作成する必要があります。以下のコードのように：

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

0
Ray

Onfocusおよびonblur関数を使用できます。シンプルで最高でしょう。

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

ここで試してください：

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

0
Naveen Kumar

outディレクティブを使用しました。コードは次のとおりです。

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

すべての入力コントロールには、次の要素としてspan要素があります。これは、検証メッセージが表示される場所です。そのため、属性としてのディレクティブが各入力コントロールに追加されます。

また、ディレクティブで参照されていることが確認されているcssファイルに（オプション）.has-focusおよびhas-visited cssクラスがあります。

注：アポストロフィなしで入力コントロールに「on-blur-val」をこの方法で追加することを忘れないでください

0
user3676608

bootstrap 3およびlesscssを使用する場合、以下のスニペットを使用してぼかし検証を有効にできます。

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

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

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

Ng-classおよび関連するコントローラーのスコープのプロパティを使用して、has-error cssクラスを動的に設定できます（ブートストラップを使用している場合）：

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>

コントローラ：

$scope.badEmailAddress = false;

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