javascript - Password field with validation and "Show password" option in AngularJS - Stack Overflow

admin管理员组

文章数量:1394593

I'm trying to make an password field, that matches the following criteria:

1. Valid password should be from 6 to 24 symbols long, and have at least one digit.
2. When the field contains invalid password, it should always be have .ng-invalid class.

To make password symbols visible I use two inputs synchronized through model:

<form name="form" ng-app="myApp" ng-controller="Controller" novalidate>    
<label>
   Password:
    <input type="password" name="uPass" maxlength="24" ng-hide="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />   
    <input type="text" name="uPass" maxlength="24" ng-show="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />
    <span class="message" ng-show="form.uPass.$dirty && form.uPass.$invalid">Must be from 6 to 24 symbols long ang contain at least one digit.</span> 
</label>

<label>
    <input type="checkbox" name="uShowPass" ng-model="formFlags.showpass" toggle-pass/>Show password
</label>    
</form>

See full code here: / .

Here I'm trying to do the following:

1. I enter an invalid password. The input field gets.ng-invalid class (red border).
2. I click "Show password". Password input gets hidden, text input gets visible.

The problem is that is not validated until I change it's value. How do I make it validate immediately after it is shown?

UPD: in AngularJS of versions 1.2.x and higher my example works properly, the issue is relevant only for lower versions.

I'm trying to make an password field, that matches the following criteria:

1. Valid password should be from 6 to 24 symbols long, and have at least one digit.
2. When the field contains invalid password, it should always be have .ng-invalid class.

To make password symbols visible I use two inputs synchronized through model:

<form name="form" ng-app="myApp" ng-controller="Controller" novalidate>    
<label>
   Password:
    <input type="password" name="uPass" maxlength="24" ng-hide="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />   
    <input type="text" name="uPass" maxlength="24" ng-show="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />
    <span class="message" ng-show="form.uPass.$dirty && form.uPass.$invalid">Must be from 6 to 24 symbols long ang contain at least one digit.</span> 
</label>

<label>
    <input type="checkbox" name="uShowPass" ng-model="formFlags.showpass" toggle-pass/>Show password
</label>    
</form>

See full code here: http://jsfiddle/adept/9uCGQ/44/ .

Here I'm trying to do the following:

1. I enter an invalid password. The input field gets.ng-invalid class (red border).
2. I click "Show password". Password input gets hidden, text input gets visible.

The problem is that is not validated until I change it's value. How do I make it validate immediately after it is shown?

UPD: in AngularJS of versions 1.2.x and higher my example works properly, the issue is relevant only for lower versions.

• javascript
• validation
• angularjs

Share Improve this question Follow edited Jan 26, 2018 at 10:18 adept asked Jan 16, 2014 at 12:23 adeptadept 4311 silver badge55 bronze badges 1

• One thing to note is that the name of an input needs to be unique if you want to use it for field validation otherwise it will overwrite. You need to rename uPass for the text field and reference both of them in form.uPass.$dirty && form.uPass.$invalid – Liviu T. Commented Jan 16, 2014 at 14:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Just add formatters.unshift too, so it will also look to model changes, not only view ones.

Edited fiddle:

http://jsfiddle/9uCGQ/5/

Added code:

       ctrl.$formatters.unshift(function(viewValue) {
            if (viewValue.length >= scope.formFlags.minpasslength && PASS_REGEXP.test(viewValue)) {
                // it is valid
                ctrl.$setValidity('pass', true);
            } else {
                // it is invalid
                ctrl.$setValidity('pass', false);
            } 
            // update model anyway to sync password fields
            return viewValue;
        });

More about the two properties (parsers and formatters) on the ng-controller documentation: http://docs.angularjs/api/ng.directive:ngModel.NgModelController

本文标签： javascriptPassword field with validation and quotShow passwordquot option in AngularJSStack Overflow