password-check directive in angularjs

Question

I m writing a password verify directive     Directives directive  passwordVerify  function        return           require  ngModel           link  function scope element attrs ctrl               ctrl  parsers unshift function viewValue                   var origin   scope  eval attrs  passwordVerify                     if origin   viewValue                       ctrl  setValidity  passwordVerify  false                       return undefined                   else                      ctrl  setValidity  passwordVerify  true                       return viewValue                                                            html     lt input data-ng-model  user password  type  password  name  password  placeholder  password  required gt   lt input data-ng-model  user password verify  type  password  name  confirm password  placeholder  confirm password  required data-password-verify  user password  gt    Given 2 password fields in a form  if both password values are equal then the field affected  by the directive is valid  The issue is that it works one way  i e  when I type a password in the password-verify field   However  when the original password field is updated  the password-verify doesn t become valid    Any idea how I could have a  two way binding verify

User · Answer

Not a directive solution but is working for me:

<input ng-model='user.password'
 type="password"
 name='password'
 placeholder='password'
 required>
<input ng-model='user.password_verify'
 type="password" 
 name='confirm_password'
 placeholder='confirm password'
 ng-pattern="getPattern()"
 required>

And in the controller:

//Escape the special chars
    $scope.getPattern = function(){
        return $scope.user.password && 
              $scope.user.password.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
    }

http://plnkr.co/edit/QDTnipCsHdg56vgygsqC?p=preview

User · Answer

lt input name  password  type  text  required    ng-model  password  placeholder  password  class  ng-dirty ng-valid ng-valid-required  gt      lt input name  confirm password  type  text  required    ng-model  confirm password  ui-validate     value  password    ui-validate-watch    password    placeholder  confirm password  class  ng-dirty ng-valid-required ng-invalid ng-invalid-validator  gt       lt span ng-show  form confirm password  error validator  gt Passwords do not match  lt  span gt          password errors             required   false           validator   true

User · Answer

In order to validation of form with two input field i find most suitable way of   Directive  app directive  passwordVerify   function     return       require   ngModel       link  function  scope  elem  attrs  ctrl            if   attrs passwordVerify                return                    scope  watch attrs passwordVerify  function  value              if  value     ctrl  viewValue  amp  amp  value     undefined                 ctrl  setValidity  passwordVerify   true                ctrl  setValidity  parse  undefined                         else                ctrl  setValidity  passwordVerify   false                                   ctrl  parsers push function  value                var isValid   value     scope  eval attrs passwordVerify               ctrl  setValidity  passwordVerify   isValid               return isValid   value   undefined                               HTML        lt div class  row  gt           lt div class  col-md-10 col-md-offset-1  gt             lt div class  form-group  ng-class     has-error   form password  dirty  amp  amp  form password  error required     form password  error minlength    form password  error maxlength    gt                 lt input type  password  name  password  ng-minlength  6  ng-maxlength  16  id  password  class  form-control  placeholder  Password  ng-model  user password  required   gt                 lt span ng-show  form password  dirty  amp  amp  form password  error required  class  help-block  gt Password is required lt  span gt                 lt span ng-show  form password  error minlength    form password  error maxlength  class  help-block  gt Password must be 6-16 character long lt  span gt             lt  div gt           lt  div gt          lt  div gt          lt div class  row  gt            lt div class  col-md-10 col-md-offset-1  gt              lt div class  form-group  ng-class     has-error    form confirm password  dirty  amp  amp  form confirm password  error required     form confirm password  error passwordVerify    gt                 lt input type  password  name  confirm password  id  confirm password  class  form-control  placeholder  Confirm Password  ng-model  user confirm password  required password-verify  user password    gt                 lt span ng-show  form confirm password  dirty  amp  amp  form confirm password  error required  class  help-block  gt Confirm Password is required lt  span gt                 lt span ng-show  form confirm password  error passwordVerify  class  help-block  gt Please make sure passwords match  amp  must be 6-16 character long lt  span gt             lt  div gt           lt  div gt         lt  div gt

User · Answer

This should solve it   View    lt div ng-controller  Ctrl  gt      lt form name  form  gt         lt input data-ng-model  user password  type  password  name  password  placeholder  password  required gt         lt div ng-show  form password  error required  gt          Field required lt  div gt         lt input ng-model  user password verify  type  password  name  confirm password  placeholder  confirm password  required data-password-verify  user password  gt         lt div ng-show  form confirm password  error required  gt          Field required  lt  div gt         lt div ng-show  form confirm password  error passwordVerify  gt          Fields are not equal  lt  div gt      lt  form  lt  div gt    Directive  var app   angular module  myApp         app directive  passwordVerify   function        return         require   ngModel         scope            passwordVerify                     link  function scope  element  attrs  ctrl            scope  watch function                 var combined               if  scope passwordVerify    ctrl  viewValue                   combined   scope passwordVerify         ctrl  viewValue                                                 return combined             function value                if  value                    ctrl  parsers unshift function viewValue                        var origin   scope passwordVerify                      if  origin     viewValue                            ctrl  setValidity  passwordVerify   false                           return undefined                        else                           ctrl  setValidity  passwordVerify   true                           return viewValue

User · Answer

Creating a separate directive for this is not needed  There is already a build in Angular UI password validation tool  With this you could do     lt input name  password  required ng-model  password  gt   lt input name  confirm password         ui-validate     value  password           ui-validate-watch    password    gt    Passwords match      form confirm password  error validator

User · Answer

Yet another take on this is to match the model of one input to another input   s value   app directive  nxEqual   function         return           require   ngModel           link  function  scope  elem  attrs  model                if   attrs nxEqual                    console error  nxEqual expects a model as an argument                     return                            scope  watch attrs nxEqual  function  value                    model  setValidity  nxEqual   value     model  viewValue                               model  parsers push function  value                    var isValid   value     scope  eval attrs nxEqual                   model  setValidity  nxEqual   isValid                   return isValid   value   undefined                                         So  if the password box   s model is login password then you set the following attribute on the verification box  nx-equal  login password   and test for formName elemName  error nxEqual  Like so    lt form name  form  gt       lt input type  password  ng-model  login password  gt       lt input type  password  ng-model  login verify  nx-equal  login password  name  verify  gt       lt span ng-show  form verify  error nxEqual  gt Must be equal  lt  span gt   lt  form gt    Extended version   For a new project of mine I had to modify the above directive so that it would only display the nxEqual error when  and only when  the verification input had a value  Otherwise the nxEqual error should be muted  Here   s the extended version   app directive  nxEqualEx   function         return           require   ngModel           link  function  scope  elem  attrs  model                if   attrs nxEqualEx                    console error  nxEqualEx expects a model as an argument                     return                            scope  watch attrs nxEqualEx  function  value                       Only compare values if the second ctrl has a value                  if  model  viewValue     undefined  amp  amp  model  viewValue                               model  setValidity  nxEqualEx   value     model  viewValue                                                 model  parsers push function  value                       Mute the nxEqual error if the second ctrl is empty                  if  value     undefined    value                               model  setValidity  nxEqualEx   true                       return value                                    var isValid   value     scope  eval attrs nxEqualEx                   model  setValidity  nxEqualEx   isValid                   return isValid   value   undefined                                         And you would use it like so    lt form name  form  gt       lt input type  password  ng-model  login password  gt       lt input type  password  ng-model  login verify  nx-equal-ex  login password  name  verify  gt       lt span ng-show  form verify  error nxEqualEx  gt Must be equal  lt  span gt   lt  form gt    Try it  http   jsfiddle net gUSZS

User · Answer

The Keep It Simple And Stupid KISS  principle might be useful on this one  Its more faster and easier to check if both passwords match by doing the following    lt div ng-app  app  ng-controller  passwordCheck  gt     lt form name  signUp  ng-submit  submitForm    novalidate gt        lt input type  password  name  password  ng-model  password  required gt        lt input type  password  name  ConfirmPassword  ng-model  passwordconfirm    required gt        lt button type  submit  gt  Submit lt  button gt     lt  form gt      lt hr gt     lt span gt Do they match  lt  span gt    signUp password  viewValue    signUp confirmPassword  viewValue        lt  div gt    And Before submitting the form  you can do this in your js  var app   angular module  app        app controller  passwordCheck   function  scope        scope submitForm   function           if   scope signUp  valid  amp  amp   scope signUp password  viewValue     scope signUp confirmPassword  viewValue                alert  Its a match                         You can test it in JSfiddle as well

User · Answer

To add to the large number of already existing solutions  this works well for me    Jan Laussmann answer stopped working with the latest AngularJS beta releases    directive   angular module  myApp   directive  matchValidator    function             return               require   ngModel               link  function scope  elm  attr  ctrl                    var pwdWidget   elm inheritedData   formController   attr matchValidator                    ctrl  parsers push function value                        if  value     pwdWidget  viewValue                            ctrl  setValidity  match   true                            return value                                                                    if  value  amp  amp  pwdWidget  viewValue                            ctrl  setValidity  match   false                                                               pwdWidget  parsers push function value                        if  value  amp  amp  ctrl  viewValue                            ctrl  setValidity  match   value     ctrl  viewValue                                             return value                                                         usage   lt input type  email  ng-model  value1  name  email  required gt   lt input type  email  ng-model  value2  name  emailConfirm  match-validator  email  required gt    display error   lt div ng-if    yourFormName   emailConfirm  error  gt       lt div ng-if    yourFormName   emailConfirm  error match  gt          Email addresses don t match       lt  div gt   lt  div gt

User · Answer

I was dealing with the same issue and found a good blog post about it written by Piotr Buda  It s a good read and it explains the process very well  The code is as follows   directives directive  repeatPassword   function         return           require   ngModel           link  function scope  elem  attrs  ctrl                var otherInput   elem inheritedData   formController   attrs repeatPassword                ctrl  parsers push function value                    if value     otherInput  viewValue                        ctrl  setValidity  repeat   true                       return value                                    ctrl  setValidity  repeat   false                                otherInput  parsers push function value                    ctrl  setValidity  repeat   value     ctrl  viewValue                   return value                                         So you could do something like    lt input type  password  name  repeatPassword  id  repeatPassword  placeholder  repeat password  ng-model  user repeatPassword  repeat-password  password  required gt    Credit goes to the author

User · Answer

The following is my take on the problem  This directive would compare against a form value instead of the scope    use strict    function          angular module         directive  equals   function   timeout            return               restrict   A               require     form    ngModel                scope  false              link  function   scope  elem  attrs  controllers                    var validationKey    equals                   var form   controllers 0                   var ngModel   controllers 1                    if   ngModel                        return                                       run after view has rendered                  timeout function                         scope  watch attrs ngModel  validate                         scope  watch form attrs equals   validate                      0                    var validate   function                          var value1   ngModel  viewValue                      var value2   form attrs equals   viewValue                      var validity    value1     value2    value1     value2                      ngModel  setValidity validationKey  validity                       form attrs equals   setValidity validationKey validity                                                               in the HTML one now refers to the actual form instead of the scoped value    lt form name  myForm  gt     lt input type  text  name  value1  equals  value2  gt     lt input type  text  name  value2  equals  value1  gt     lt div ng-show  myForm  invalid  gt The form is invalid  lt  div gt   lt  form gt

User · Answer

I have done it without directive     lt input type  password  ng-model  user password  name  uPassword  required placeholder  Password  ng-minlength  3  ng-maxlength  15  title  3 to 15 characters    gt       lt span class  error  ng-show  form uPassword  dirty  amp  amp  form uPassword  error minlength  gt Too short lt  span gt       lt span ng-show  form uPassword  dirty  amp  amp  form uPassword  error required  gt Password required  lt  span gt  lt br   gt        lt input type  password  ng-model  user confirmpassword  name  ucPassword  required placeholder  Confirm Password  ng-minlength  3  ng-maxlength  15  title  3 to 15 characters    gt       lt span class  error  ng-show  form ucPassword  dirty  amp  amp  form ucPassword  error minlength  gt Too short lt  span gt       lt span ng-show  form ucPassword  dirty  amp  amp  form ucPassword  error required  gt Retype password  lt  span gt       lt div ng-show   form uPassword  dirty  amp  amp  form ucPassword  dirty   amp  amp   user password    user confirmpassword   gt           lt span gt Password mismatched lt  span gt       lt  div gt

User · Answer

In order to achieve validation when both inputs change  I use the following code  which was a combination of all others other answers    angular module  app directives    directive  passwordVerify    function          return           require    ngModel           restrict   A           scope                origin    passwordVerify                     link  function  scope  element  attrs  ctrl                if  ctrl                    return                             function validate value                    ctrl  setValidity  passwordMatch   scope origin     value                   return value                             ctrl  parsers unshift validate                scope  watch  origin   function value                    validate ctrl  viewValue

User · Answer

Is this not good enough    lt input type  password  ng-model  passwd1    gt   lt input type  password  ng-model  passwd2    gt   lt label ng-show  passwd1    passwd2  gt Passwords do not match    lt  label gt   lt button ng-disabled  passwd1    passwd2  gt Save lt  button gt    Simple  and works just fine for me

User · Answer

This works both ways and it is simple and clean  JavaScript   var app   angular module  app     app controller  SamePaswordController   function         this password    this confirm     this save   function          alert  Saved              app directive  match   function        return       restrict  A       require  ngModel        link  function scope  element  attrs  ctrl           function matchValidator value                   scope  watch attrs match  function newValue  oldValue               var isValid   value     scope  eval attrs match                                 ctrl  setValidity  match   isValid                         return value                 ctrl  parsers push matchValidator                    HTML  note the match directive    lt form name  regForm  ng-controller  SamePaswordController as regCtrl        ng-submit  regForm  valid  amp  amp  regCtrl save    novalidate gt      lt input name  password  ng-model  regCtrl password            type  password  required placeholder  Password   gt                      lt input name  confirm  ng-model  regCtrl confirm  match  regCtrl password           type  password  required placeholder  Confirm password   gt       lt div gt  regForm is valid   regForm  valid   lt  div gt      lt input type  submit  value  Save   gt    lt  form gt    You can clone the repo with this example https   github com rogithub roangularjs

User · Answer

https   github com wongatech angular-confirm-field is a good project for this   Example here http   wongatech github io angular-confirm-field   The code below shows 2 input fields with the implemented functionality    lt input ng-confirm-field ng-model  emailconfirm  confirm-against  email  name  my-email-confirm   gt   lt input ng-model  email  name  my-email    gt

User · Answer

First  I would like to thank Fredric for posting this excellent example  There is one tiny issue that I came across by coincidence  on the Fiddle you posted http   jsfiddle net gUSZS   If you type in a password  and then type in the same password in the verify input element everything works fine  but try to add a space to the second box and angular will automatically trim that space  This means that the directive doesnt  see  the extra space  Now the passwords are different  but the form is still valid   to fix this we need to add  ng-trim  false    to the input elements  This doesnt work in angular 1 0 3 so if you want to try it in this fiddle you need to add 1 1 1 to the Fiddle  http   ajax googleapis com ajax libs angularjs 1 1 1 angular js   But again  thanx Frederic  I will use your solution in my app   Anton P S  I wanted to comment on Frederic s post  but Im new to this forum and dont seem to have enough credit  So it would be very much appreciated if some of you can up vote my comment if you like it  -

User · Answer

I use the following directive because I want to re-validate both input field regardless of whether value 1 or value 2 was changed   directive    use strict    angular module  myApp   directive  equals   function       return       restrict   A      only activate on element attribute     require    ngModel      get a hold of NgModelController     link  function scope  elem  attrs  ngModel          if  ngModel  return     do nothing if no ng-model           watch own value and re-validate on change       scope  watch attrs ngModel  function             validate                        observe the other value and re-validate on change       attrs  observe  equals   function  val            validate                     var validate   function                values         var val1   ngModel  viewValue          var val2   attrs equals              set validity         ngModel  setValidity  equals     val1      val2    val1     val2                            usage   lt input type  password  ng-model  value1  equals    value2    required gt   lt input type  password  ng-model  value2  equals    value1    required gt

User · Answer

This worked for me   Directive   modulename directive  passwordCheck   function           return           restrict   A      only activate on element attribute         require    ngModel      get a hold of NgModelController         link  function  scope  elem  attrs  ngModel                if   ngModel  return     do nothing if no ng-model              var Value   null                  watch own value and re-validate on change             scope  watch attrs ngModel  function  val                    Value   val                    validate                                    observe the other value and re-validate on change             attrs  observe  passwordCheck   function                      validate                                 var validate   function                          values                 var val1   Value                  var val2   attrs passwordCheck                      set validity                  if  val1        amp  amp  val1    undefined                        ngModel  setValidity  passwordCheck   val1    val2                                       else                       ngModel  setValidity  passwordCheck   true                                                          HTML   ng-model  confirmpassword selected  type  password  name  confirmpassword    password-check    password selected     ng-show  resetpasswordform confirmpassword  error passwordCheck  amp  amp  submitted  Password does not match

User · Answer

Something like this works for me   js    directive  sameAs   function     return       require    ngModel       link   function scope  elm  attrs  ngModelCtrl             ngModelCtrl  validators sameAs   function modelValue  viewValue                var checkedVal   attrs sameAs              var thisInputVal   viewValue               if  thisInputVal    checkedVal                    return true     valid               else                   return false                                          html    lt input type  password  name  password  id  password  ng-model  password    gt    lt input type  password  name  passwordRepeat  id  passwordRepeat       ng-model  passwordRepeat  same-as    password      gt

User · Answer

I ve used this directive with success before     directive  sameAs   function       return       require   ngModel       link  function scope  elm  attrs  ctrl          ctrl  parsers unshift function viewValue            if  viewValue     scope attrs sameAs               ctrl  setValidity  sameAs   true             return viewValue            else             ctrl  setValidity  sameAs   false             return undefined                                       Usage        lt input     name  password    gt       lt input type  password  placeholder  Confirm Password   name  password2  ng-model  password2  ng-minlength  9  same-as  password  required gt

User · Answer

As of angular 1 3 0-beta12  invalid inputs don t write to ngModel  so you can t watch AND THEN validate as you can see here  http   plnkr co edit W6AFHF308nyKVMQ9vomw p preview  A new validators pipeline was introduced and you can attach to this to achieve the same thing   Actually  on that note I ve created a bower component for common extra validators  https   github com intellix angular-validators which includes this   angular module  validators   directive  equals   function         return           restrict   A           require    ngModel           link  function scope  elem  attrs  ngModel                        if   ngModel  return               attrs  observe  equals   function                     ngModel  validate                                 ngModel  validators equals   function value                    return value     attrs equals                                       angular module  validators   directive  notEquals   function         return           restrict   A           require    ngModel           link  function scope  elem  attrs  ngModel                        if   ngModel  return               attrs  observe  notEquals   function                     ngModel  validate                                 ngModel  validators notEquals   function value                    return value     attrs notEquals

User · Answer

This solution is similar to the one given by Dominic Watson  which uses  validators and is the one I like best  The only changes are that you can watch an expression       validators A collection of validators that are applied whenever the   model value changes  The key value within the object refers to the   name of the validator while the function refers to the validation   operation  The validation operation is provided with the model value   as an argument and must return a true or false value depending on the   response of that validation   from https   code angularjs org 1 3 15 docs api ng type ngModel NgModelController  I m using angular 1 3  My directive looks something like this  angular module  app   directive  passwordConfirm   function          use strict       return           require    ngModel           restrict    A           scope                   We will be checking that our input is equals to this expression             passwordConfirm     amp                      link   function scope  element  attrs  ctrl                  The actual validation             function passwordConfirmValidator modelValue  viewValue                    return modelValue    scope passwordConfirm                                Register the validaton when this input changes             ctrl  validators passwordConfirm   passwordConfirmValidator                Also validate when the expression changes             scope  watch scope passwordConfirm  ctrl  validate                          To use it    lt input type  password  ng-model  user password   gt   lt input type  password  ng-model  user confirmPassword                   password-confirm  user password    gt

User · Answer

I had the same problem when i was trying to build my own directive  and i fixed with this add     ctrl  validate      where ctrl is my ngModelController  this is my view   lt input type  password  match  signupCtrl registrationData password  name  confirmPassword  class  form-control  placeholder  Confirm Password  data-ng-model  signupCtrl registrationData confirmPassword  required gt           lt span ng-messages  registerForm confirmPassword  error  gt               lt span ng-message  match  gt The Password must match lt  span gt           lt  span gt    this is my directive   function           use strict       angular module  matchDirective                Angular modules            Custom modules            3rd Party Modules                 function           use strict       angular          module  matchDirective            directive  match   match       match  inject      window         function match  window               Usage                  lt element match  source  gt  lt  element gt             Creates                     var directive                 link  link              restrict   A               require   ngModel                      return directive           function link scope  element  attrs  ctrl                scope  watch attrs  match    function  newVal  oldVal                    ctrl  validators match   function  modelValue  viewValue                        if  newVal    modelValue                            return true                        else                           return false                                                          ctrl  validate

User · Answer

No need for an extra directive  here s my take on this   HTML    lt div class  form-group  data-ng-class     has-error   submitted  amp  amp   form new passwd  valid    gt       lt input type  password  name  new passwd  class  form-control  data-ng-model  data new passwd  placeholder  New Password  required data-ng-pattern  passwdRegex  gt       lt small class  help-block  data-ng-show  submitted  amp  amp  form new passwd  error required  gt New password is required  lt  small gt       lt small class  help-block  data-ng-show  submitted  amp  amp   form new passwd  error required  amp  amp  form new passwd  error pattern  gt New password is not strong enough  lt  small gt   lt  div gt    lt div class  form-group  data-ng-class     has-error   submitted  amp  amp   form new passwd conf  valid    gt       lt input type  password  name  new passwd conf  class  form-control  data-ng-model  data new passwd conf  placeholder  Confirm New Password  required data-ng-pattern  passwdConfRegex  gt       lt small class  help-block  data-ng-show  submitted  amp  amp  form new passwd conf  error required  gt New password confirmation is required  lt  small gt       lt small class  help-block  data-ng-show  submitted  amp  amp   form new passwd conf  error required  amp  amp  form new passwd conf  error pattern  gt New password confirmation does not match  lt  small gt   lt  div gt    Javascript    scope passwdRegex           A-Z        a-z        d         da-zA-Z    8       scope  watch  data new passwd   function          scope passwdConfRegex   new RegExp Regex escape  scope data new passwd          where Regex escape   can be found here   Works like a charm

[javascript] password-check directive in angularjs

Examples related to javascript

Examples related to angularjs