I'm trying to match up passwords using Parsley.js but it doesn't seem to be working. 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 data-equalto="#password" should do the check, but it doesn't seem to work.
I call the parsley validate in the form like so:
<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">
I'm trying to match up passwords using Parsley.js but it doesn't seem to be working. 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 data-equalto="#password" should do the check, but it doesn't seem to work.
I call the parsley validate in the form like so:
<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">
- 4 Who were you, Kevin? What did you see?! xkcd./979 – backus Commented Aug 18, 2013 at 7:18
- Try 'data-parsley-equalto' instead of 'data-equalto' (check out parsleyjs/doc/index.html#psly-validators-list). It worked for me with parsley.js version 2.2 – Fernando Martin Commented Oct 30, 2015 at 8:22
3 Answers
Reset to default 4Been struggling with this for a few hours, found the answer courtesy of JoelCDoyle. I want to re-iterate it because though the question is dated, the answer provided by Joel works. Thanks! :)
<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 you need to make the pare function work with parsley.js:
data-parsley-equalto="#pw"
I'm not sure if this will help you but I have a working solution here: http://codepen.io/anon/pen/KNyjoY
Basic installation
<form data-parsley-validate>
...
</form>
Javascript installation (I'm using this)
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I have added an event for #password to trigger #cpassword form validation.
$('#password').on('change input keyup', function() {
if (this.value) {
$('#cpassword').prop('required', true).parsley().validate();
} else {
$('#cpassword').prop('required', false).parsley().validate();
}
});
In the newest Parsley Version, you don't call the API by "data-" Attributes anymore. Not quite sure, if this is the case on your Version (i know data values worked in the past), but try it with the New API.
Therefore you call the form different with the property "parsley-validate" which is True if Set. And the Constraints are called with "parsley-[constraint]". As stated on the official Parsley.js Site, its not quite W3C patible, but for some weird Reason he likes it like that. However he also gives an Solution with defining a Namespace for Parsley to make it W3C patible.
If you can Deliver the old Parsley version, I could have a look on that too.
Attention
This answer (and maybe question) is dated. The answer may not be valid anymore, keep a look at the Comments on this answer.