输入类型不是 "submit"时的 HTML5 验证

Question

我正在使用 HTML5 来验证字段。我在单击按钮时使用 JavaScript 提交表单。但是 HTML5 验证不起作用。它仅在输入类型为 submit 时有效.除了使用 JavaScript 验证或将类型更改为 submit 之外，我们还能做些什么吗？

这是 HTML 代码:

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>

我在函数 submitform() 中提交表单。

Answer 1

HTML5 表单验证过程仅限于通过提交按钮提交表单的情况。 Form submission algorithm明确指出当通过 submit() 方法提交表单时不执行验证。显然，这个想法是，如果您通过 JavaScript 提交表单，则应该进行验证。

但是，您可以使用 checkValidity() 方法根据 HTML5 属性定义的约束请求(静态)表单验证。如果您想显示与浏览器在 HTML5 表单验证中相同的错误消息，恐怕您需要检查所有受约束的字段，因为 validityMessage 属性是字段的属性(控件)，而不是表单。在单个约束字段的情况下，如所呈现的情况，这当然是微不足道的:

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.checkValidity()) {
    f.submit();
  } else {
    alert(document.getElementById('example').validationMessage);
  }
}