Parsley.js Password Confirm doesn‘t work

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!