Add a custom validation using Angular Auto Validate

Question

First, I'm using Angular Auto Validate and it's working as expected, but I want to add a custom validation to compare passwords.

Here's my code actually:

<form role="form" name="changePasswordForm" novalidate="novalidate" ng-submit="changePassword()">
  <div class="box-body">
    <div class="form-group">
      <label for="oldPassword">Old Password</label>
      <input type="password" class="form-control" id="txtOldPassword" name="oldPassword" ng-model="data.oldPassword" placeholder="Old password" required="required" ng-pattern="/^[A-Za-z]+$/" ng-minlength="6" ng-maxlength="10" ng-pattern-err-type="badOldPassword">
    </div>
    <div class="form-group">
      <label for="newPassword">New Password</label>
      <input type="password" class="form-control" id="txtNewPassword" name="newPassword" ng-model="data.newPassword" placeholder="New password" required="required" ng-pattern="/^[A-Za-z]+$/" ng-minlength="6" ng-maxlength="10" ng-pattern-err-type="badNewPassword">
    </div>
    <div class="form-group">
      <label for="confirmNewPassword">Confirm New Password</label>
      <input type="password" class="form-control" id="txtConfirmNewPassword" name="confirmNewPassword" ng-model="data.confirmNewPassword" placeholder="Confirm new password" required="required" ng-pattern="/^[A-Za-z]+$/" ng-minlength="6" ng-maxlength="10" ng-pattern-err-type="badConfirmNewPassword">
    </div>
  </div>
  <!-- /.box-body -->
  <div class="box-footer">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

var userApp = angular
  .module("userModule", ['jcs-autoValidate'])
  .run(function(defaultErrorMessageResolver) {
    defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages) {
      errorMessages['badOldPassword'] = 'Old password must contain only alphabets.';
      errorMessages['badNewPassword'] = 'New password must contain only alphabets..';
      errorMessages['badConfirmNewPassword'] = 'Confirm password must contain only alphabets.';
    })
  })
  .controller('userController', function($scope, $http, $log) {
    $scope.data = {};

    $scope.changePassword = function() {
      alert('form submitted');
    }
  });

developer033 · Accepted Answer · 2016-07-17 18:14:00Z

You should create a directive for this, as below:

angular.module('app', ['jcs-autoValidate'])
  .controller('mainCtrl', function($scope) {
  
  })
  
  .directive('confirmPassword', function(defaultErrorMessageResolver) {
    defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages) {
      errorMessages['confirmPassword'] = 'Please ensure the passwords match.';
    });
  
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        confirmPassword: '=confirmPassword'
      },
      link: function(scope, element, attributes, ngModel) {
        ngModel.$validators.confirmPassword = function(modelValue) {
          return modelValue === scope.confirmPassword;
        };
  
        scope.$watch('confirmPassword', function() {
          ngModel.$validate();
        });
      }
    };
  });

<!DOCTYPE html >
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/jonsamwell/angular-auto-validate/master/dist/jcs-auto-validate.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="mainCtrl">
  <div class="container main-content">
    <form novalidate="novalidate">
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" ng-model="formModel.password" required="" ng-minlength="6" ng-maxlength="12" />
      </div>
      <div class="form-group">
        <label for="exampleInputPassword">Confirm Password</label>
        <input type="password" class="form-control" id="passwordConfirm" placeholder="Confirm Password" ng-model="formModel.confirmPassword" required="" ng-minlength="6" ng-maxlength="12" confirm-password="formModel.password" />
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">Register
        </button>
      </div>
    </form>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

Add a custom validation using Angular Auto Validate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related