如何防止 JavaScript form.submit() 忽略必填字段

Question

我有一个 HTML 表单，其中包含一些文本字段和图像的文件输入。它具有文本的必填字段，它还对使用 JavaScript (jQuery) 选择的图像进行一些客户端验证。

这是表格：

<form name="addbookform" id="addbookform" action="processaddbook.php" method="POST">
<p />
<input name="name" id="name" type="text" placeholder="Name" required />
<p />
<textarea name="description" id="description" cols=30 rows=4 placeholder="Enter a short description">
</textarea>
<p />
<input name="image" id="image" type="file" accept="image/png, image/jpeg" />
<p />
<input type="button" id="finishbutton" value="Submit" />
</form>

为了对图像进行客户端检查，我编写了一些 JavaScript 代码（使用 jQuery），并将其链接到 finishbutton。

$(document).ready(function() {
    $('#finishbutton').click( function() {
        var fileInput = document.getElementById("bookimage");
        if (fileInput.value == "") {
            // We can just submit the form without an image.
            addbookform.submit();
        } else {
            // Check for image size and other properties...
            if (success == true) {
                addbookform.submit();
            }
        }
    });

});

现在图像检查按预期工作（报告错误或对图像有效），但是，表单上的name 输入中有一个必填字段。当图像检查通过（或没有图像）时，调用提交函数，但似乎 HTML 跳过了必填字段验证。

有没有办法防止这种情况发生？

Answer 1

我认为与其强制提交表单，不如采取相反的方式：如果出现问题，请阻止表单提交

1. 将提交按钮类型更改为提交。这将在单击时呈现一个带有表单提交操作的按钮。
2. 更改事件以处理表单提交而不是按钮单击。
3. 将标志值设置为真。如果在验证结束时，flag 为 false，则阻止提交。
4. 检查您的图像。如果出现任何问题，请更改标志。
5. 检查您的输入。如果出现任何问题，请更改标志。
6. （注意） 到目前为止，没有阻止表单提交。只更改标志。
7. 验证结束时。检查你的旗帜。如果为 false，则阻止提交。如果为真，则什么也不做。

在表单提交中，如果您在提交事件的任何时候return false;，提交将被取消。