我正在使用 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()函数中提交表单。
【问题讨论】：
标签： html forms validation html5-validation
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);
}
}
【讨论】：
alert 可以在代码示例中简化为 alert(f.validationMessage);，以防您循环使用:-)
我可能迟到了，但我这样做的方式是创建一个隐藏的提交输入，并在提交时调用它的点击处理程序。类似的东西（为简单起见使用 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>
【讨论】：
您应该使用包含输入的表单标签。并输入类型提交。
这行得通。
<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();
}
这将在无效时为您提供验证，并且在有效时不会提交表单。
【讨论】：
我想添加一种我最近遇到的新方法。即使当您使用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 展示了这个概念：
【讨论】：
尝试使用<button type="submit">，您可以通过执行<form ....... onsubmit="submitform()"> 来执行submitform() 的功能
【讨论】：
submitform() 应该在表单标签中工作。您在控制台中看到什么错误，或者只是提交表单而不执行其他验证？
submitform() 中执行文本字段验证，因为html5 的required 与提交按钮一起使用
您可以将按钮类型更改为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>
【讨论】：
2019 年更新：通过使用 HTMLFormElement.reportValidity()，现在报告验证错误比接受答案的时间更容易，它不仅像 checkValidity() 一样检查有效性，而且还向用户报告验证错误。
如果元素的子控件满足其验证约束，则 HTMLFormElement.reportValidity() 方法返回 true。当返回 false 时，会为每个无效子节点触发可取消的无效事件，并向用户报告验证问题。
更新解决方案sn-p：
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.reportValidity()) {
f.submit();
}
}
【讨论】：
HTML5 验证仅在按钮类型将被提交时工作
改变--
<button type="button" onclick="submitform()" id="save">Save</button>
到--
<button type="submit" onclick="submitform()" id="save">Save</button>
【讨论】：
试试这个：
<script type="text/javascript">
function test
{
alert("hello world"); //write your logic here like ajax
}
</script>
<form action="javascript:test();" >
firstName : <input type="text" name="firstName" id="firstName" required/><br/>
lastName : <input type="text" name="lastName" id="lastName" required/><br/>
email : <input type="email" name="email" id="email"/><br/>
<input type="submit" value="Get It!" name="submit" id="submit"/>
</form>
【讨论】：