通過JavaScript更新輸入字段值后無法清除驗證消息

Question

我有一個使用jQuery Validation插件在客戶端進行驗證的表單。 為簡便起見，我創建了一個簡單的測試用例來展示我的問題。 表單具有單個文本輸入字段和單個隱藏輸入字段。

<script>
    function testThis() {
        alert('value before: ' + $("#testhidden").val());
        $("#testhidden").val("sometext");
        alert('value after: ' + $("#testhidden").val());
    }
</script>
<form name="testform" id="testform" method="post" action="">
    Enter Text: <input type="text" id="testfield" title="test field is required" name="testfield" size="20" minlength="2" maxlength="10" required="required" />
    <input type="hidden" id="testhidden" title="hidden field is required" name="testhidden" minlength="4" required="required" />
    <p><input type="button" id="addvalue" name="addvalue" value="Add Value via JavaScript" onclick="testThis();" /></p>
    <p><input type="submit" id="testbutton" name="testbutton" value="Submit Form" /></p>
</form>

對這兩個字段的驗證是必填字段，並且必須具有一定的長度； 隱藏字段至少4個字符，文本字段至少2-10個字符。 我的警告是，在將表單加載到DOM之后，隱藏字段將通過JavaScript更新。

我制造了一個小提琴來證明我的問題 。 在此測試中，我添加了一個按鈕來模擬我如何通過JavaScript修改隱藏輸入的值。 要進行測試，請執行以下操作：

1. 嘗試提交表單而不輸入任何文本。 您應該得到2個驗證錯誤。
2. 接下來，在文本輸入字段中輸入文本，輸入至少2個字符后，第一條驗證消息將被隱藏。
3. 如果您此時嘗試提交，由於隱藏字段的要求，仍然不會。
4. 接下來，單擊通過JavaScript添加值按鈕。 我提醒之前和之后的值。 在這一點上，一旦隱藏字段具有正確的數據，我希望驗證消息被隱藏，但事實並非如此。
5. 此時將提交表單，因為已滿足驗證條件，但仍顯示錯誤消息。

一旦隱藏字段包含適當的文本，如何獲取驗證消息以將其隱藏？

這是我用於上面的測試表單的簡單驗證調用：

$("#testform").validate({errorElement:"div",ignore:[]});

萬一重要，我正在使用jQuery 1.11.1和jQuery Validate 1.12.0

更新

盡管Pointy的答案不能解決問題，但我認為他已經走上了正確的道路。 我需要某種方法來觸發在更新隱藏字段后觸發驗證。 我現在通過添加第二個輸入文本字段來更新小提琴 。 我也在通過JavaScript更新此輸入字段。 當我通過JavaScript更新后在此新字段上觸發blur()事件時，它會正確隱藏驗證消息。 但是，在隱藏字段上執行相同的操作仍然無效。 它絕對是一個隱藏的領域...

Answer 1

引用OP ：

“我需要某種方式來觸發驗證...”

該插件提供了一種稱為.valid()的方法 ，其唯一目的是以編程方式觸發對單個字段或整個表單的驗證。

“它肯定與它是一個隱藏領域有關”

常規輸入字段的驗證通常由諸如擊鍵和模糊之類的事件觸發。 由於在隱藏字段中沒有這些事件，因此只需要使用.valid()方法即可手動觸發驗證。

$("#testhidden").valid();

我已經按如下方式修改了您的函數，並且由於您使用的是jQuery，因此還刪除了內聯JavaScript ...

$('#addvalue').on('click', function() {
    alert('value before: ' + $("#testhidden").val());
    $("#testhidden").val("sometext");
    $("#testhidden").valid(); // <- manually trigger validation of this field
    alert('value after: ' + $("#testhidden").val());
});

演示： http : //jsfiddle.net/opzg6uxn/2/

---

但是，我不明白為什么您需要驗證用戶無法控制的內容。 換句話說，由於隱藏字段是通過程序控制的，因此首先對其進行驗證有什么意義？

Answer 2

您必須自己觸發“更改”事件，以使驗證代碼重新運行。 這是您所做的更改的小提琴。

    $("#testhidden").val("sometext").trigger("change");

Answer 3

為了使其能夠在jsfiddle上運行，我將隱藏輸入的類型更改為簡單的文本類型，並實際上添加了樣式visible：hidden以使其對用戶不可見。 通過這種方法，即使用戶看不見jquery的驗證插件，它也會評估您的輸入。

<input type="text" style="visibility:hidden" id="testhidden" title="hidden field is required" name="testhidden" minlength="4" required="required" />

希望這個答案對您有問題。