我正在尝试按钮点击处理表单验证。它正在验证表单但不显示错误。 任何人都可以帮助我吗?
<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;
}
});
答案 0 :(得分:19)
尝试
reportValidity()
所以你有
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity()) {
alert('validated');
}
else {
$("#the-form")[0].reportValidity();
}
});
答案 1 :(得分:4)
我通过以下步骤实现了这一目标:
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验证错误点击:)
希望也适合你! :)
答案 2 :(得分:3)
这是完美的答案
<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;
}
});
答案 3 :(得分:0)
删除else语句。 (更新)
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated'); //will appear if name and email are of valid formats
}
});
答案 4 :(得分:-1)
你应该可以简单地添加onclick =“return validateForm()”。
<button id="btn" onclick="return validateForm()" type="button">Submit</button>