如果表单无效，是否调用提交

Does submit get called if form is invalid?

本文关键字：调用 提交 是否 表单 无效 如果      更新时间：2023-09-26

我想知道如果我的表单数据在 html5 验证中无效，是否调用 submit。例如，我有一个表单 ID personal_info。

我使用以下块来进入提交事件：

$("#personal_info").submit(function(event) {
    event.preventDefault();
    saveData("personal_info");
});
function saveData(formName){
 console.log("test");
}

是函数 saveData 在提交时调用的默认行为，因为即使我的表单无效，也会调用该函数。

如何防止表单无效时调用提交函数？

除非您在表单上使用 novalidation 属性，否则新的 HTML5 验证 API 不会提交无效表单。有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation。

It works but should on submit be called if the form is not valid.

每当提交表单 #personal_info 时，提交功能都会运行。

提交函数可能未运行的原因是因为这行

event.preventDefault();

这可以防止发生默认操作，即提交表单。因此，表单不会正常提交，因此您的网页不会重新加载/刷新。

即使表单无效，也可以调用提交。这没什么不对。按照代码在问题中的方式，saveData 函数设置为每次运行，即使它无效。因此，我们可以改变这种情况。

就像 A. Wolff 在评论中所说的那样，你可以在调用 saveData 函数时用一个 if 语句来包装。

所以你可以让你的代码看起来像这样

$("#personal_info").submit(function(event) {
    event.preventDefault();
    if ($(this).valid()) {         // if form is valid
        saveData("personal_info"); // then do this
    }
});
function saveData(formName){
 console.log("test");
}
相关文章：