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?

Munro

Ohh i find my bug. This Question is closed yet. – Munro

Damn what was your bug? I'm seeing the same problem! – Mitzvah

I guess the bug is that #eqalToModel refers to an element id and he doesn't have it on the HTML tags! – Gusty

If you fixed your problem, add your solution as an Answer below and then mark it "accepted". – Medulla

Answer 1

It's possible you're using the wrong tag, as of Parsely.js 2.0:

data-parsley-equalto="#anotherfield"

Doit

Straight Solution – Brazilein

This is not working if the confirm password is empty it skips the validation. – Oscitancy

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!

Meniscus

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.

Journalistic

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"

Longways

I suggest you to improve your example by reading the Minimal, Complete and verifiable example. – X

I suggest you to improve your "look your bussiness" ;) – Longways