最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - parsley data-equalto not working - Stack Overflow

programmeradmin2浏览0评论

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">
Share Improve this question asked Apr 18, 2013 at 20:00 KevinKevin 56712 silver badges26 bronze badges 2
  • 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
Add a ment  | 

3 Answers 3

Reset to default 4

Been 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.

发布评论

评论列表(0)

  1. 暂无评论