[英]HTML5 validation when the input type is not "submit"
我正在使用 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>
我想添加一种我最近遇到的新方法。 即使在您使用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"><\/code>您可以通过执行
<form ....... onsubmit="submitform()"><\/code>来执行
submitform()<\/code>的功能
"
您可以更改按钮类型以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()<\/a> ,现在报告验证错误比接受答案的时间更容易,它不仅像
checkValidity()<\/code>一样检查有效性,而且还向用户报告验证错误。
如果元素的子控件满足其验证约束,则 HTMLFormElement.reportValidity() 方法返回 true。 当返回 false 时,会为每个无效的子节点触发可取消的无效事件,并向用户报告验证问题。
更新的解决方案片段:
HTML5 验证仅在提交按钮类型时工作
改变 -
<button type="button" 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.