gpt4 book ai didi

javascript - 为什么表单的 onsubmit 函数只调用一次?

转载 作者:行者123 更新时间:2023-12-02 22:38:06 24 4
gpt4 key购买 nike

和 jar 头上写的差不多。此代码片段演示了该问题:

function check(e) {
console.log($('input[name="myinput"]').val());
if ($('input[name="myinput"]').val() == "123") {
return true;
} else {
$('input[name="myinput"]')[0].setCustomValidity("Invalid");
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<form onsubmit="return check()">
<input name="myinput">
<input type="submit">
</form>
</div>

加载表单后,在输入字段中输入 1 并提交表单。提交失败,因为输入字段的值不是 123,并且值 "1" 记录在控制台中。现在将值更改为其他值并重新提交表单;控制台中没有多余的行,即使输入的值为 123,“无效”表单有效性仍然存在。

为什么 onsubmit 处理程序只调用一次?

最佳答案

因为处于“无效”状态的表单(因为表单内的输入处于“无效”状态)将不会提交。

创建的表单有效性不会在 submit 事件上更改,因为正如您所注意到的,您不会获得任何新的 submit。您必须在提交之前更改表格的有效性。通常,会对每个输入单独检查表单有效性。从这里开始就是你自己的口味了。我建议检查 blur 上每个输入的有效性:

$('input[name="myinput"]').on("blur", () => {
// Do your checks and setCustomValidity depending on if is valid or not
});

这样,如果所有输入都有效,您只会收到 submit 事件。顺便说一下,要使其工作,您必须在启动时将所有输入设置为无效状态,以避免在不触及任何输入的情况下提交空内容。

如果所有输入均为空,另一种方法可能是禁用提交按钮。为此,您还需要 JavaScript 并检查所有输入上的 changeinput 事件。

关于javascript - 为什么表单的 onsubmit 函数只调用一次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58678973/

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