欧芹数据 - 等于不工作

Question

我正在尝试使用 Parsley.js 匹配密码，但它似乎不起作用。代码如下：

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

这部分 data-equalto="#password" 应该进行检查，但它似乎不起作用。

我以如下形式调用欧芹验证：

<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">

Answer 1

为此苦苦挣扎了几个小时，找到了JoelCDoyle 提供的答案。我想重新迭代它，因为尽管这个问题已经过时，但乔尔提供的答案是有效的。谢谢！ :)

        <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"
        />

这是使比较功能与 parsley.js 一起工作所需的属性： data-parsley-equalto="#pw"

Answer 2

我不确定这是否会对您有所帮助，但我有一个可行的解决方案：http://codepen.io/anon/pen/KNyjoY

基本安装

<form data-parsley-validate>
...
</form>

Javascript安装（我在用这个）

<form id="form">
...
</form>

<script type="text/javascript">
  $('#form').parsley();
</script>

我为#password 添加了一个事件来触发#cpassword 表单验证。

$('#password').on('change input keyup', function() {
    if (this.value) {
      $('#cpassword').prop('required', true).parsley().validate();
    } else {
      $('#cpassword').prop('required', false).parsley().validate();
    }
  });

Answer 3

在最新的 Parsley 版本中，您不再通过“data-”属性调用 API。不太确定，如果您的版本是这种情况（我知道数据值过去有效），但请尝试使用新 API。

因此，您使用“parsley-validate”属性调用不同的表单，如果设置为 True，则该属性为 True。并且用“parsley-[constraint]”调用约束。 正如官方 Parsley.js 网站所述，它不太兼容 W3C，但出于某种奇怪的原因，他喜欢这样。然而，他还提供了一个解决方案，为 Parsley 定义了一个命名空间，以使其与 W3C 兼容。

如果你能提供旧的 Parsley 版本，我也可以看看。

注意

这个答案（也许还有问题）已经过时了。 答案可能不再有效，请查看对此答案的评论。