Disable submit when validate confirm password in angularjs

Question

I want to disable submit button when validate confirm password. I followed this model:

Angularjs:

 var app = angular.module('myapp', ['UserValidation']);

    angular.module('UserValidation', []).directive('validPasswordC', function () {
        return {
            require: 'ngModel',
            link: function (scope, elm, attrs, ctrl) {
                ctrl.$parsers.unshift(function (viewValue, $scope) {
                    var noMatch = viewValue != scope.myForm.password.$viewValue
                    ctrl.$setValidity('noMatch', !noMatch)
                })
            }
        }
    })

view :

<div ng-app="myapp">
       <form name="myForm">



           <label for="password">Password</label>
           <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required  />
       <span ng-show="myForm.password.$error.required && myForm.password.$dirty">required</span>
       <span ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Passwords must be between 8 and 20 characters.</span>
       <span ng-show="!myForm.password.$error.required && !myForm.password.$error.minlength && !myForm.password.$error.maxlength && myForm.password.$error.pattern && myForm.password.$dirty">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</span>
           <br />


           <label for="password_c">Confirm Password</label>
           <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required  />
       <span ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">Please confirm your password.</span>
       <span ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && myForm.password.$dirty">Passwords do not match.</span>
           <br />

       <button type="submit" class="btn" ng-disabled="!myForm.$valid">Submit</button>
        </form>
       </div>

But the problem is that It does not check for password field, When the submit button enable, I input again password field another values which is different Confirm password and the submit button is still enable.

thankyou verymuch

dhavalcengg · Accepted Answer · 2014-07-18 09:31:22Z

3

I have forked your fiddle. Checkout this http://jsfiddle.net/dhavalcengg/ERX54

Hope this will help.

answered Jul 18, 2014 at 9:31

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nishant Kumar · Accepted Answer · 2020-05-03 04:16:11Z

I would do like this

<form name="new_password" ng-submit="vm.reset()" role="form" ng-style="{'visibility': vm.visibility ? 'visible' : 'hidden'}">
    <div class="form-group">
        <label for="your_name">OTP Received in Email</label>
        <input type="text" name="otp" id="otp" class="form-control" ng-model="vm.user.otp" required />
    </div>
    <div class="form-group">
        <label for="your_name">New Password</label>
        <input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required />
    </div>
    <div class="form-group">
        <label for="your_name">Re-enter Password</label>
        <input type="password" name="repassword" id="repassword" class="form-control" ng-model="vm.user.repassword" required />
    </div>
    <div class="form-actions">
        <button type="submit" ng-disabled="new_password.$invalid || vm.dataLoading || vm.user.password != vm.user.repassword" class="btn btn-primary">Reset Password</button>
        <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
    </div>
</form>

Collectives™ on Stack Overflow

Disable submit when validate confirm password in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related