사용자가 필드를 떠난 후 필드 확인

사용자가 필드를 떠난 후 필드 확인

Angular JS는 Angular를 사용할 수 .JS js js js jsng-pristine ★★★★★★★★★★★★★★★★★」ng-dirty사용자가 필드에 입력했는지 여부를 검출합니다.다만, 유저가 필드 에리어를 떠난 후에만 클라이언트측의 검증을 실시합니다.이는 사용자가 이메일이나 전화와 같은 필드에 입력하면 완전한 이메일 입력이 완료될 때까지 항상 오류가 발생하며 이는 최적의 사용자 환경이 아니기 때문입니다.

예

---

갱신:

Angular에는 커스텀 블러 이벤트가 포함되어 있습니다.https://docs.angularjs.org/api/ng/directive/ngBlur

1에서는, 「」1.3.0 으로 할 수 .$touched이는 사용자가 필드를 떠난 후에 적용됩니다.

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

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

1.이을 Angular 1.3'ng-model-options'로 할 수 .{ 'updateOn': 'blur'} 사용의 , 몇 개의 고가의 DOM, 이 복수의 해, 모든 으로 $이 발생하는 것을 경우)에는 debounce 할 수도 . 사용 속도가 너무 빠르거나 비용이 많이 드는 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-param="{ update }On: 'blur' }"은(는) 컨트롤의 포커스를 잃은 후에만 업데이트 및 유효성을 검사합니다.공백으로 구분된 목록을 사용하여 여러 이벤트를 설정할 수 있습니다.예: ng-model-param="{ update }점등: '머드다운 흐림' }"

그리고 debounce

ngModelOptions 디렉티브에 debounce 키를 사용하면 모델 업데이트/검증을 지연시킬 수 있습니다.이러한 지연은 $dirty 또는 $pris틴과 같은 파서, 검증자 및 모델 플래그에도 적용됩니다.

예를 들어, ng-model-model="{debounce: 500}"은 마지막 컨텐츠 변경 후 모델 업데이트 및 폼 유효성 검사를 트리거하기 전에 0.5초 동안 기다립니다.

저는 @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를 사용하여 사용자에게 더 나은 경험을 제공할 수 있습니다.

CSS에 관한 정보입니다., 에러 가 "Crass"로 합니다.error

:focus ~ .error {
    display:none;
}

이 두 가지 요건을 충족하면 집중 입력 필드에 관련된 오류 메시지가 표시되지 않습니다.이것은 어쨌든 angularjs가 해야 할 일이라고 생각합니다.실수처럼 보이네

이것은 새로운 버전의 angular에서 표준으로 구현된 것으로 보입니다.

클래스 ng-untouched와 ng-touched는 각각 사용자가 검증된 요소에 초점을 맞추기 전과 후에 설정됩니다.

CSS

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

@lambinator 솔루션에 대해서...angular.js 1.2.4에서 다음 오류가 발생했습니다.

오류: [$rootScope:inprog] $digest가 이미 진행 중입니다.

제가 뭘 잘못했는지 아니면 앵글이 바뀐 건지 모르겠지만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);

javascript blur() 메서드를 감싸는 커스텀 디렉티브를 작성하는 것이 효과적일 수 있습니다.또한 샘플 디렉티브가 있는 Angular 문제가 있습니다(또한 Angular가 네이티브하게 지원하지 않는 다른 이벤트에 바인드할 수 있는 일반적인 디렉티브도 있습니다.

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

이 루트를 사용하지 않을 경우 필드에 $watch를 설정하고 필드가 입력되면 다시 검증을 트리거합니다.

지정된 응답을 더 자세히 파악하려면 CSS3 의사 클래스를 사용하여 방문한 필드만 클래스로 마킹하여 사용자가 필드에 집중할 수 없게 될 때까지 검증 오류 표시를 지연시키는 방법으로 입력 태깅을 단순화할 수 있습니다.

(예: jQuery 필요)

자바스크립트

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>

@contractions 답변에 근거합니다.순수한 CSS는 트릭이 발생했을 경우, 에러 메세지가 흐릿하게 표시되었을 뿐입니다.

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

다음은 ng-messages(angular 1.3에서 사용 가능)와 커스텀 디렉티브를 사용하는 예를 나타냅니다.

사용자가 입력 필드를 처음 벗어나면 검증 메시지가 흐릿하게 표시되지만 값을 수정하면 검증 메시지가 즉시 삭제됩니다(흐릿하게 표시되지 않게 됩니다).

자바스크립트

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

AngularJS 1.3의 ng-model-options(이 문서에서는 베타)는 {update}를 지원하는 것으로 문서화되어 있습니다.점등: '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>

Use field state $touched 이 필드는 아래 예시와 같이 터치되었습니다.

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

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

부트스트랩3 및 lesscss를 사용하는 경우 다음 스니펫을 줄여서 블러 검증을 netable로 할 수 있습니다.

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

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

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

내가 지시한 것보다 먼저 썼어코드는 다음과 같습니다.

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

모든 입력 컨트롤에는 다음 요소로 스판 요소가 있으며, 여기서 검증 메시지가 표시되므로 속성으로서의 지시어가 각 입력 컨트롤에 추가됩니다.

(옵션)도 있습니다.명령어로 참조되고 있는 css 파일의 has-disclass 및 has-disclass.

메모: 아포스트로피를 사용하지 않고 입력 컨트롤에 'on-blur-val'을 정확하게 추가해야 합니다.

ng-focus를 사용하면 목표를 달성할 수 있습니다.입력 필드에 ng-module을 입력해야 합니다.그리고 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>

포커스와 온블러 기능을 사용할 수 있습니다.단순하고 최선의 방법일 거야

<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

언급URL : https://stackoverflow.com/questions/15798594/validate-fields-after-user-has-left-a-field