通过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" /> 

希望这个答案是你的问题。