Make another field invalid while validating

Question

I'm dealing with a standard "change your password" form where you have two fields: password1 and password2. Those two fields are just to validate that the user enter the right password and they need to contain the same text.

I added a directive to validate password but now I want that, if both fields are not equal between each other, make both fields become invalid and not just the one I'm typing in. Can I do that?

I try to call the $setValidity on both ngmodels but I'm not finding the way to call from one ctrl.$parsers.unshift or directive link function the $setValidity or the other field I'm not currently validating. I'm really lost..

Thanks a lot!

My directive is:

myApp.directive('validatepassword', function () {
    return {
        require: 'ngModel',
        restrict: 'A', // only activate on element attribute
        link: function (scope, elm, attrs, ngModel) {
            ngModel.$parsers.unshift(function (viewValue) {
                var valPasswordValue = attrs.validatepassword;
                var otherPassword = $('#' + valPasswordValue)[0].value;
                var valido = scope.validatePassword(viewValue, otherPassword);
                ngModel.$setValidity('password', valido);
                return viewValue;
            });
        }
    };
});

and I'm using in this way in the code:

        <div class="control-group">
            <label class="control-label" for="inputPassword1">Password</label>
            <div class="controls">
                <input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required validatepassword="inputPassword2"/>
                <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputPassword2">Repeat Password</label>
            <div class="controls">
                <input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required validatepassword="inputPassword1"/>
                <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
            </div>
        </div>

Any ideas about how can I validate both fields as soon as one of them change?

Thanks a lot!

DanEEStar · Accepted Answer · 2013-06-14 06:42:29Z

To trigger the validation method from one field in another field I had to manually set the value of the other field. You can do that inside of a ng-change:

ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"

When you do that it should trigger the validation in both password fields.

You could also access the fields inside of your directive like so:

scope.addEditForm.inputPassword1

So you could get rid of the jQuery access inside of your directive.

Here is the HTML-partial that worked for password validation on both fields:

<div class="control-group">
    <label class="control-label" for="inputPassword1">Password</label>

    <div class="controls">
        <input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required
               validatepassword="inputPassword2" ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"/>
        <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputPassword2">Repeat Password</label>

    <div class="controls">
        <input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required
               validatepassword="inputPassword1" ng-change="addEditForm.inputPassword1.$setViewValue(addEditForm.inputPassword1.$viewValue)"/>
        <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
    </div>
</div>

Kazi Manzur Rashid · Accepted Answer · 2013-06-14 08:50:55Z

2

Angular-UI has a built-in validator which you can use in various purpose, there is a exact example of password and confirm password which you can check: https://github.com/angular-ui/ui-utils/blob/master/modules/validate/demo/index.html#L29

answered Jun 14, 2013 at 8:50

Kazi Manzur Rashid

1,54413 silver badges14 bronze badges

4 Comments

Kazi Manzur Rashid Over a year ago

fernaramburu, not exactly sure but it working perfectly in my case.

fernaramburu Over a year ago

kazimanzurrashid, thanks a lot for your answer but the thing there is that that example does not work :) What is not working? Check [here] (angular-ui.github.io/ui-utils), go to the validate region and try the following steps: 1) Type "hello" in the first password field 2) Type "hello" in the second password field (everything works!) 3) Add a "d" to the second password field so you have "hellod" 4) Add a "d" to the first password field so you also have a "hellod" Error! Angular didn't detect they are equal! That's why i'm looking for alternatives.

fernaramburu Over a year ago

Sorry, I re-edit the comment as I forget step 4. Please try again with step 4 included.

Kazi Manzur Rashid Over a year ago

You are absolutely right, just found the issue. Opened an issue: github.com/angular-ui/ui-utils/issues/52

Vignesh Subramanian · Accepted Answer · 2013-06-14 08:15:43Z

1

Please check this fiddle http://jsfiddle.net/vigneshvdm/Dnt7w/5/

you can do something like this

var password=$("#telephone").val();
var reenteredpassword=$("#mobile").val();

if(password==reenteredpassword)
{
$("#required").html("Passwords Match");
}
else
{
$("#required").html("Passwords do not Match");
}

answered Jun 14, 2013 at 8:15

Vignesh Subramanian

7,31915 gold badges98 silver badges161 bronze badges

3 Comments

DanEEStar Over a year ago

this answer has nothing to do with AngularJS

Vignesh Subramanian Over a year ago

Yes but question has a javascript tag !?

fernaramburu Over a year ago

Thanks for the answers and for the example @vignesh but I was trying to use angular validation.

Collectives™ on Stack Overflow

Make another field invalid while validating

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related