通过 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 个字符。我需要注意的是，表单加载到 DOM 后，隐藏字段正在通过 JavaScript 更新。

我创建了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 Validate 1.12.0

更新

虽然 Pointy 的回答并没有解决问题，但我认为他正朝着正确的方向前进。我需要一些方法来触发在更新隐藏字段后触发验证。通过添加第二个输入文本字段，我现在拥有updated my fiddle。我还通过 JavaScript 更新这个输入字段。当我通过 JavaScript 更新后在这个新字段上触发 blur() 事件时，它正确地隐藏了验证消息。但是在隐藏字段上做同样的事情仍然不起作用。它肯定与它是一个隐藏的领域有关......

Answer 1

引用OP：

“我需要一些方法来触发验证...”

插件提供a method called .valid()，其唯一目的是以编程方式触发验证，无论是在单个字段上还是在整个表单上。

“这肯定与它是一个隐藏的领域有关”

常规输入字段的验证通常由 keyup 和 blur 等事件触发。由于您在隐藏字段上没有这些事件，您只需使用.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

您必须自己触发“更改”事件以使验证代码重新运行。 Here is your fiddle with that change.

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

Answer 3

为了让它在 jsfiddle 上工作，我将你隐藏输入的类型更改为简单的文本类型，并实际上添加了样式 visibility:hidden 以使其对用户不可见。使用这种方法，jquery 的验证插件将评估您的输入，即使它对用户是不可见的。

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

希望这个答案能解决你的问题。