仅使用parsley.js验证提交表单

时间:2015-12-10 21:09:38

标签: javascript parsley.js

我有一个简单的表格

<form action="#" method="GET" class="parsleyVal">
  <div class="input-group input-group-lg">
    <input type="email" name="email" class="form-control input-email" 
           placeholder="Enter your email"  
           data-parsley-required-message="Please enter your email address" 
           data-parsley-required title="Please enter your email address" 
           auto-complete="off" data-parsley-trigger="submit" />
    <span class="input-group-btn">
      <button class="btn btn-orange" type="submit"  data-parsley-trigger="click touch">
        Sign up
      </button>        
    </span>
  </div>
</form>

点击sign-up按钮后开始验证。

但是,如果没有指定电子邮件,则会显示错误:

  

输入您的电子邮件。

当用户开始输入他们的电子邮件地址时,parsley.js会自动进行验证并显示电子邮件必须有效。

我希望parsley.js在再次点击提交按钮时重新验证电子邮件字段,但不是

我在输入字段上尝试了 xCodexInlinexPlacexHolderx - 没有帮助。

2 个答案:

答案 0 :(得分:0)

看起来我终于找到了我想要的东西。

如果有人可以推荐别的东西,可能不是理想的做法。

$('.parsleyVal input[type=email]').on('keyup keydown', function () {
            $('.filled').removeClass('filled');
            $('.parsleyVal').parsley().destroy();
        })

脚本删除类以隐藏错误消息并破坏欧芹验证,这将在注册按钮单击时再次触发。

答案 1 :(得分:0)

您可以通过两种不同的设置来控制触发验证的原因:

data-parsley-trigger
设置首次触发验证的方式。默认值为 null ,基本表示提交时

数据parsley触发失败后
设置第一次失败后触发重新验证的方式。默认值为 input ,这意味着在每次更改字段后都会重新验证该字段。

您需要的设置是:data-parsley-trigger-after-failure

示例:

<input type="email" id="profile-email" 
                    data-parsley-required="true" 
                    data-parsley-trigger-after-failure="submit"/>