僅使用 parsley.js 在提交時驗證表單

Question

我有一個簡單的表格

<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 - 沒有幫助。

Answer 1

看來我終於明白我想要什么了。

如果有人可以推薦其他東西，這可能不是理想的方法。

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

腳本刪除類以隱藏錯誤消息並破壞歐芹驗證，這將在單擊注冊按鈕時再次觸發。

Answer 2

您可以使用兩種不同的設置來控制觸發驗證的內容：

數據-歐芹-觸發器
設置第一次觸發驗證的內容。 默認為空，這基本上意味着提交

數據-歐芹-故障后觸發
設置在第一次失敗后觸發重新驗證的內容。 默認為輸入，這意味着該字段將在每次更改字段后重新驗證。

你需要的設置是：data-parsley-trigger-after-failure

例子：

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