jQuery 驗證插件 - “必需”規則行為異常

Question

我將這個jQuery 驗證插件( jquery-validate ) 與 Bootstrap 結合使用，我已經用它制作了 5 個表單，並且非常痛苦。

我現在有了這個JSFiddle ，但我的密碼字段表現得很奇怪......
如您所見，我為所有密碼設置了required規則。 如果我刪除瀏覽器中的所有項目符號並移至下一個字段，則它保持不變，如果已標記為正確，則保持正確，如果根本沒有標記，則保持未標記。 它沒有被標記為不正確，錯誤信息也沒有出現！

我只能通過首先在密碼字段上生成minlength錯誤，然后刪除所有字符或單擊提交按鈕（僅當所有字段都未處於錯誤狀態時才可用）來顯示我required規則錯誤消息。

經過大量檢查，我找到了onfocusout選項。 這可以是true或false ，默認設置為true正如網站所述，

[It] 在模糊時驗證 [s] 元素（復選框/單選按鈕除外）。 如果未輸入任何內容，則跳過所有規則，除非該字段已被標記為無效。

這肯定是原因，我想。 但是經過大量的谷歌搜索后，結果證明沒有其他人有這個問題（或者至少，由於onfocusout規則）。 一個帖子確實提到“ required規則是一個例外”（ onfocusout規則？）。

---

底線：我無法使我required規則錯誤起作用，但提交或首次生成minlength錯誤消息時除外。 然后，它確實出現了。
結論：可以產生錯誤，但不能產生blur 。
問題：如何解決這個問題？

---

我的密碼輸入欄

<input type="password" class="form-control" id="passw" name="passw" value="nochange" maxlength="20" required="required" placeholder="123456789" />

我的密碼規則

passw: {
    required: true,
    minlength: 5,
    maxlength: 20
},

---

我在應該放置錯誤時添加了console.log消息 - 甚至沒有調用。 我驗證了我的代碼和 HTML，對所有內容進行了三重檢查，但我仍然找不到錯誤...

Answer 1

引用 OP：

“我無法讓我需要的規則錯誤起作用，除了提交或第一次產生 minlength 錯誤消息時。然后，它確實出現了......我驗證了我的代碼和 HTML，對所有內容進行了三重檢查，但我仍然找不到錯誤"

這不是一個錯誤。 這稱為“懶惰”驗證，它是默認行為。

文件：

“在字段被標記為無效之前，驗證是惰性的：在第一次提交表單之前，用戶可以在字段之間切換而不會收到煩人的消息——他們不會在有機會實際輸入正確值之前被竊聽...它旨在提供不顯眼的用戶體驗，盡可能少地用不必要的錯誤消息打擾用戶”

引用 OP：

“經過大量檢查，我找到了onfocusout選項。這可以是true或false ，默認設置為 true 正如網站所述”

不完全的。 默認情況下onfocusout處於活動狀態； 您不能在不破壞插件的情況下將其設置為true 。 您只能將其設置為false （以禁用它），或者您可以使用自己的函數覆蓋它。

文件：

“設置為函數以自己決定何時運行驗證。布爾值true不是有效值。”

修改onfocusout回調選項以獲得更多“急切”驗證，以便所有驗證在離開該字段時立即觸發。

$('#yourform').validate({
    // your rules & options,
    onfocusout: function (element, event) {
        this.element(element);  // eager validation
    }
});

演示： jsfiddle.net/p4K7S/

要獲得更完整的“Eager”驗證體驗，請對onkeyup回調函數執行相同操作，一旦在字段內開始鍵入，驗證就會開始。

$('#yourform').validate({
    // your rules & options,
    onfocusout: function (element, event) {
        this.element(element);  // eager validation
    },
    onkeyup: function (element, event) {
        this.element(element);  // eager validation
    }
});

演示 2： jsfiddle.net/em0uspk3/

為什么在使用onkeyup時仍然需要onfocusout ？ 因為在用戶與 radio、checkbox 和 select 元素交互期間沒有 keyup 事件。