单击按钮时手动触发HTML验证
Manually trigger HTML validation on button click
我正在尝试在单击按钮时处理表单验证。它正在验证表单,但没有显示错误。
有人能帮我吗?
<form id="the-form" action="#">
<input type="text" required="required" placeholder="Required text" />
<input type="email" required="required" placeholder="email" />
<button id="btn" type="button">Submit</button>
</form>
JavaScript:
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated');
}
else
{
//show errors
return false;
}
});
http://jsfiddle.net/5ycZz/
尝试
reportValidity()
所以你会有
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity()) {
alert('validated');
}
else {
$("#the-form")[0].reportValidity();
}
});
我通过以下步骤实现了这一点:
1) 我有表格:
<form>
<textarea required></textarea>
<input type="submit" style="display:none;"/>
</form>
<a>Some other button to trigger event</a>
2) 现在我们必须检查表格是否填写正确:
//this is <a> click event:
if (!$('form')[0].checkValidity()) {
$('form').find('input[type="submit"]').click();
return false;
}
这将触发表单发送,但由于存在错误而不会发送;)
似乎在输入[type="submit"]点击时显示了html5验证错误:)
希望对你也有用!:)
这里是的完美答案
<form id="the-form" action="#">
<input type="text" required="required" placeholder="Required text" />
<input type="email" required="required" placeholder="email" />
<button id="btn" type="submit">Submit</button>
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated');
}
else
{
return 0;
}
});
删除else语句。(更新)
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated'); //will appear if name and email are of valid formats
}
});
您应该能够简单地添加onclick="return validateForm()"。
<button id="btn" onclick="return validateForm()" type="button">Submit</button>
相关文章:
- 为什么我的 JavaScript 会导致 HTML 验证错误
- 检查浏览器是否支持 HTML 验证
- 使用EJS模板进行HTML验证;文本/模板”;元素
- 通过HTML验证(RegEx)在电子邮件中验证域
- 如何使用PHP和HTML验证表单
- 如果我使用类型 = 按钮,HTML 5 验证就会消失
- 如何使用 HTML 验证日期范围
- HTML 5 验证表单缺少操作
- 如何隐藏启用 JavaScript 的浏览器的验证码并通过 html 验证
- 单击按钮时手动触发HTML验证
- 正在禁用HTML验证.如何设置'novalidate'适用于全球范围内的每种形式
- 使用Linkedin代码登录会给我html验证错误
- ajax在html验证后提交
- 如何通过使用OnChange Javascript HTML验证表单
- Grunt html验证插件
- 在不破坏HTML验证的情况下换行表行
- 哪个事件导致浏览器显示HTML验证消息
- javascript中的HTML验证
- 在我的textArea中的W3C Html验证器
- Piwik跟踪代码破坏HTML验证