我正在使用 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()。
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);
}
}
我可能迟到了，但我这样做的方式是创建一个隐藏的提交输入，并在提交时调用它的点击处理程序。类似的东西（为简单起见使用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 展示了这个概念：
Try with <button type="submit">you can perform the 功能submitform()by doing <form ....... onsubmit="submitform()">
您可以将按钮类型更改为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 时，会为每个无效的子节点触发可取消的无效事件，并向用户报告验证问题。
更新的解决方案片段：
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>