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

我认为不是强制表单提交，而是反过来：如果出现问题，请阻止表单提交

更改提交按钮类型以提交。这将在单击时呈现带有表单提交操作的按钮。
将事件更改为表单提交而不是按钮单击。
将标志值设置为true。如果在验证结束时，flag为false，则阻止提交。
检查您的图片。如果出现任何问题，请更改标志。
检查您的输入。如果出现任何问题，请更改标志。
（注）到目前为止，还没有停止提交表单。只改变旗帜。
验证结束时。检查你的旗帜。如果为false，请阻止提交。如果是真的，什么都不做。

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

如何防止JavaScript form.submit（）忽略必填字段

1 个答案: