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

我有一个HTML表单，其中包含一些图像的文本字段和文件输入。它具有文本所需的字段，它还对使用JavaScript（jQuery）选择的图像进行了一些客户端验证。如何防止JavaScript form.submit（）忽略必填字段

这里是形式：

<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已跳过所需的字段验证。

有没有办法来防止这种情况？

来源

2017-08-04 Tom Shen

我会使用普通的'type = submit'按钮，然后使用$（“＃addbookform”）。on（“submit”，...）'做任何额外的验证，防止提交如果图像验证失败，否则只是允许默认的提交行为继续。 – nnnnnn

我想，而不是强迫的形式提交，周围做其他的方式：防止表单提交，如果出现错误

更改提交按钮类型提交。这会在点击时呈现一个带有表单提交动作的按钮。
更改事件以使用表单提交而不是按钮单击。
将标志值设置为true。如果通过验证结束，标志为假，防止提交。
检查你的图像。如果出现任何问题，请更换标志。
检查您的输入。如果出现任何问题，请更换标志。
（注）到目前为止，还没有停止表单提交。只更改标志。
验证结束。检查你的旗帜。如果为false，请阻止提交。如果属实，则什么都不做。

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

来源

2017-08-04 04:22:48

如果您希望避免对已经标记为“必需”属性的字段进行双重检查，则可以询问表单additemform.checkValidity（），只有当所有必需的输入都具有某个值时，才会返回true。但明确地说，捕获表单提交事件将比捕获按钮点击更可控，以防止无效提交。 –

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

回答

相关问题