Question

我有一张带有帐单邮寄地址和送货地址的表格。这些地址包含一些带有“required”属性的字段。

如果选中了“使用结算方式作为送货方式”复选框，则应将结算地址复制到装运时提交。

但是，当我点击提交时，至少chrome会检查并抱怨字段为空，并在我的copy_billing_to_shipping运行之前暂停提交。

提交时是否有一个“钩子”在浏览器验证之前运行？

Answer 1

您可以通过一个简单的按钮替换您的提交按钮，如下所示：

<input type="button" onclick="myOwnValidate(this)" />

然后，如果验证方法中的所有内容都正常，请提交表单：

myOwnValidate = function(input) {
 ...
 if(valid) {
   input.form.submit();
 }
};

Answer 2

有些人喜欢在表单上的按钮上添加“click”处理程序以触发验证。这并不理想，因为用户可以在聚焦于文本输入时按Enter键提交表单。这将绕过表单验证。

更好的方法是在表单上为“submit”事件添加一个事件监听器。您的事件处理函数应返回true或false。如果为真，则表格将被提交。

请确保您的事件处理程序中没有任何javascript错误，因为如果您这样做，表单将会被提交。

<form id="myform">
  ....
</form>

<script>
  function validate(e) {
    var isValid = ...; // Some logic to determine validity.
    return isValid;
  }

  document.getElementById("myform").addEventListener("submit", validate);
</script>

在浏览器检查表单之前运行javascript onsubmit

2 个答案: