Parsley.js Password Confirm doesn‘t work - passwords

Question

I have problem with the Parsley.js Framework.
My Problem is that the password and password confirm have the same input, but I have a error message if click on the submit button.
Here my Testsite:
http://topkosmetikstudios.de/release/index.php?article_id=21
(german language passwort = password and password wiederholen = password confirm)
Here my Code:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input type="password" data-equalto="#eqalToModel" name="passwort" data-required="true" <?php echo ($_POST['passwort'])? $_POST['passwort']:""; ?>>
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input type="password" data-equalto="#eqalToModel" name="passwort_w" data-required="true">
</p>
</div>
I use the Parsley.js parameter data-equalto="#elem" but it doesn't work.
Here the Parsley.js documentation: http://parsleyjs.org/documentation.html
Does anyone see a problem with my code that would cause this to not function?

Answer 1

It's possible you're using the wrong tag, as of Parsely.js 2.0:
data-parsley-equalto="#anotherfield"

Answer 2

If what you are attempting to do is make sure both password 1 and password 2 are the same before you submit the form then according to the documentation (http://parsleyjs.org/doc/#psly-validators-list) you need to set an id for the fields that you want to match against. And set field one to look for the id of field two and vice versa.
Equalto #2.0 data-parsley-equalto="#anotherfield" Validates that the
value is identical to another field's value (useful for password
confirmation check).
See the example code below:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" data-equalto="#passwort_w" name="passwort" data-required="true">
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p>
</div>
For more on Parsley.js lookup their documentation.
Please mark this as an answer if this is what you were looking for. Thanks!

Answer 3

Try setting an id for the first password input (i.e. "password"), then set the data-equalto attribute of the second input to the same value (i.e. "#password") and it should work fine. If it does not work you might wish to check if parsley.js is loaded correctly. Hope this helps.

Answer 4

<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" name="passwort" data-required="true" id="passwort">
</p>
</div> <div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p> </div>
data-equalto="#id_of_compare_field"