输入类型不是"提交"时的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表单验证过程仅限于通过提交按钮提交表单的情况.该表单提交算法明确地说,当窗体通过提交不进行验证的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);
  }
}

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

您应该使用封装输入的表单标记.并输入类型提交.
这有效.

<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 4

与尝试<button type="submit">,你可以的执行功能submitform()做 <form ....... onsubmit="submitform()">

Answer 5

我想添加一种新的方法，这是我最近遇到的。即使使用该submit()方法提交表单时表单验证未运行，也没有阻止您以编程方式单击提交按钮的功能。即使是隐藏的。

具有形式：

<form>
    <input type="text" name="title" required />
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button>
    <button type="button" onclick="doFancyStuff()">Submit</button>
</form>

这将触发表单验证：

function doFancyStuff() {
    $("#submit-button").click();
}

还是没有jQuery

function doFancyStuff() {
    document.getElementById("submit-button").click();
}

就我而言，当按下假提交按钮时，我会进行大量验证和计算，如果我的手动验证失败，那么我知道我可以以编程方式单击隐藏的提交按钮并显示表单验证。

这是一个非常简单的jsfiddle，显示了这个概念：

https://jsfiddle.net/45vxjz87/1/

Answer 6

您可以将按钮类型更改为 submit

<button type="submit"  onclick="submitform()" id="save">Save</button>

或者您可以隐藏提交按钮，保留另一个 type="button" 的按钮并为该按钮设置单击事件

<form>
    <button style="display: none;" type="submit" >Hidden button</button>
    <button type="button" onclick="submitForm()">Submit</button>
</form>