HTML5需要验证无效

前端之家收集整理的这篇文章主要介绍了HTML5需要验证无效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用HTML 5验证字段。我提交表单使用javascript的按钮点击。但HTML 5验证不工作。它只有当输入类型是submit.Can我们做任何事情,除了使用js验证或更改提交的类型?
这是HTML代码
<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>

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

解决方法

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);
  }
}

猜你在找的HTML5相关文章