15

我正在尝试处理按钮单击时的表单验证。它正在验证表单但未显示错误。任何人都可以帮助我吗?

<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/

4

5 回答 5

32

尝试

reportValidity()

所以你会有

$("#btn").on("click", function(){
    if($("#the-form")[0].checkValidity()) {
        alert('validated');
    }
    else {
        $("#the-form")[0].reportValidity();
    }
});
于 2017-07-19T20:50:39.250 回答
5

我通过执行以下步骤实现了这一点:

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;
}

这将触发表单发送但不会发送,因为有错误;)

似乎 html5 验证错误显示在 input[type="submit"] 点击:)

希望对你也有用!:)

于 2014-07-31T07:52:02.603 回答
4

这是完美的答案

<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;
}

});

于 2014-12-09T07:28:56.073 回答
0

删除 else 语句。(更新)

$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
    alert('validated'); //will appear if name and email are of valid formats
}
});
于 2013-09-05T10:50:00.563 回答
-1

您应该能够简单地添加 onclick="return validateForm()"。

<button id="btn" onclick="return validateForm()" type="button">Submit</button>
于 2015-07-08T14:38:05.617 回答