输入类型不是“提交”时的HTML5验证

Question

我使用HTML5验证字段。我提交的表单使用JavaScript点击按钮。但是HTML5验证不起作用。它只在输入类型为提交时才起作用。除了使用JavaScript验证或将类型更改为提交之外，我们还能做什么吗？

这是超文本标记语言代码：

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

我正在函数submitform（）中提交表单。

Answer 1

您应该使用表单标记来封装输入。和输入类型提交
这很有效。

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

由于HTML5验证只适用于提交按钮，所以您必须将其保留在那里。通过编写表单的事件处理程序来防止默认操作，您可以避免表单提交（如果有效）。

document.getElementById('testform').onsubmit= function(e){
     e.preventDefault();
}

这将在无效时给予您验证，并且在有效时不会提交表单。

Answer 2

我可能会迟到，但我的做法是创建一个隐藏的提交输入，并在提交时调用它的单击处理程序。类似于（为了简单起见使用jquery）：

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">

<script>
function submitform() {
    $('#submit_handle').click();
}
</script>

Answer 3

HTML5表单验证过程仅限于通过提交按钮提交表单的情况。表单提交算法明确表示，当通过提交（）方法提交表单时，不执行验证。显然，这个想法是，如果你通过JavaScript提交表单，你应该进行验证。

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

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