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

希望这个答案对您有问题。