These parsley-equalto do not work

Question

I am trying to match passwords using Parsley.js, but it does not seem to work. Here is the code:

<div class="control-group"> <!-- Password--> <label class="control-label" for="password">Password</label> <div class="controls"> <div class="input-prepend"> <span class="add-on"><i class="icon-eye-close"></i></span> <input type="password" id="password" name="password" placeholder="" class="input-xlarge" data-trigger="change" data-required="true" data-minlength="6"> </div> <p class="help-block">Password should be at least 4 characters</p> </div> </div> <!-- ************ NOT WORKING *************** --> <div class="control-group"> <!-- Password --> <label class="control-label" for="password_confirm">Password (Confirm)</label> <div class="controls"> <div class="input-prepend"> <span class="add-on"><i class="icon-eye-close"></i></span> <input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge" data-equalto="#password" data-trigger="change focusout" data-required="true" > </div> <p class="help-block">Please confirm password</p> </div> </div> 

This part of data-equalto = "# password" should do the verification, but it does not work.

I call the parsley check in the form as follows:

 <form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley"> 

Answer 1

Struggling with this for hours, found the answer courtesy of JoelCDoyle . I want to repeat it, because although the question is dated, the answer that Joel gives is working. Thank you :)

  <input type="password" name="pw" id="pw" parsley-minlength="8" parsley-required="true" /> <input id="pwtwo" type="password" name="pw-verify" data-parsley-equalto="#pw" parsley-required="true" /> 

this is the attribute necessary for the comparison function to work with parsley.js: data-parsley-equalto="#pw"

Answer 2

In the latest version of Parsley, you no longer call the API attributes "data-". Not quite sure if this is the case in your version (I know the data values ​​worked in the past), but try it with the new API.

Therefore, you invoke a form other than the parsley-validate property, which is True if Set. And Constraints are invoked using parsley [restriction]. As stated on the official Parsley.js website, it is not entirely compatible with the W3C, but for some strange reason he likes it. However, it also gives a namespace definition solution for parsley to make it compatible with W3C.

If you can send the old version of Parsley, I could take a look at it too.

Attention

This answer (and possibly the question) is dated. The answer may not be valid anymore, see the comments on this answer.

Answer 3

I'm not sure if this will help you, but I have a working solution: http://codepen.io/anon/pen/KNyjoY

Basic setting

 <form data-parsley-validate> ... </form> 

Javascript installation (I use this)

 <form id="form"> ... </form> <script type="text/javascript"> $('#form').parsley(); </script> 

I added the #password event to trigger the validation of the #cpassword form.

 $('#password').on('change input keyup', function() { if (this.value) { $('#cpassword').prop('required', true).parsley().validate(); } else { $('#cpassword').prop('required', false).parsley().validate(); } });