gpt4 book ai didi

javascript - 通过 JavaScript 更新输入字段值后无法清除验证消息

转载 作者:行者123 更新时间:2023-11-29 19:34:44 25 4
gpt4 key购买 nike

我有一个表单,我正在使用 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() 事件时,它正确地隐藏了验证消息。然而,在隐藏字段上做同样的事情仍然不起作用。这肯定与它是一个隐藏字段有关...

最佳答案

引用 OP:

"I need some way to trigger the validation..."

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

"It definitely has something to do with it being a hidden field"

常规输入字段的验证通常由 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/


但是,我不明白为什么您需要验证用户无法控制的内容。换句话说,由于隐藏字段是通过编程控制的,所以首先对其应用验证有什么意义?

关于javascript - 通过 JavaScript 更新输入字段值后无法清除验证消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25687222/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com