通過JavaScript更新輸入字段值後無法獲得驗證消息

Question

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

<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個字符。我的警告是隱藏的領域正在通過JavaScript更新後，窗體已加載到DOM。

我創建了a fiddle to demonstrate my problem。對於這個測試，我添加了一個按鈕來模擬我如何通過JavaScript修改隱藏的輸入值。要測試這樣做：

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

一旦隱藏字段包含適當的文本，我該如何獲得驗證消息以隱藏？

這裏是我使用上面的測試形式一起去了簡單的驗證電話：

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

在它的事項，我使用jQuery 1.11.1和jQuery驗證1.12.0

情況

更新

雖然Pointy的回答並不能解決問題，但我認爲他正在走向正確的道路。我需要一些方法來觸發器更新隱藏字段後觸發驗證。現在我有updated my fiddle通過添加第二個輸入文本字段。我也通過JavaScript更新這個輸入字段。當我通過JavaScript更新後在這個新字段上觸發blur()事件時，它正確隱藏了驗證消息。然而，在隱藏字段上做同樣的事情仍然無效。它肯定與它是一個隱藏的領域有關......

Answer 1

報價OP：

「我需要一些方法來觸發驗證...「

該插件提供a method called .valid()在其唯一目的就是以編程方式觸發驗證，無論是在單場或整個形式。

」這肯定有事情做同在一處隱藏字段」

常規輸入字段的驗證通常是由事件如KEYUP觸發和模糊。既然你沒有對這些事件隱藏字段，您只需使用.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()); 
}); 

DEMO：http://jsfiddle.net/opzg6uxn/2/

---

但是，我不明白爲什麼你需要驗證超出用戶控制範圍的內容。換句話說，由於隱藏字段是以編程方式控制的，所以首先對其應用驗證有什麼意義？

Answer 2

你必須自己觸發「更改」事件才能導致驗證碼重新運行。 Here is your fiddle with that change.

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

Answer 3

爲了使它在jsfiddle上工作，我將隱藏輸入的類型更改爲簡單文本類型，並實際添加了樣式可見性：隱藏以使其對用戶不可見。通過這種方法，jquery的驗證插件將評估你的輸入，即使它對用戶是不可見的。

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

希望這個答案是你的問題。