手动调用HTML5表单验证

Question

我有一个遗留表单，我正在尝试更新以进行简单的HTML5表单验证。

目前，它使用reCaptcha，并在转发表单内容之前调用验证reCaptcha质询的verify（）函数。我想确保表单在继续reCaptcha处理之前通过HTML5验证，并显示浏览器默认使用的相应错误消息。

包含表格的iframe为＆lt;！DOCTYPE html＆gt; DOCTYPE。输入字段具有required属性。

提交按钮具有以下内容：

<input type="button" id="script_send" onclick="javascript:verify(this.form);" value="ENVIAR">

验证脚本具有基本结构。

function verify(theForm) {
    form = theForm;

    /* Recaptcha processing */
}

我尝试使用

if (!form.checkValidity()) {
    return false;
}

即使表单未提交，我也不会在屏幕上显示错误，向用户显示他们应该提供哪些字段。

我已经看到这个用于演示checkValidity（）函数的jsfiddle [http://jsfiddle.net/5ycZz/]，但即使这样也没有显示我希望在Chrome，IE10中看到的视觉错误提示或FF。

Answer 1

尝试在表单上设置提交事件，而不是在提交按钮上设置单击操作。 submit事件在验证后触发，因此只有在通过所有其他约束时才会发生。这也意味着您无需在form.checkValidity()功能中拨打verify。

<form onsubmit="verify(this)">
...
</form>

Answer 2

此解决问题：

if (!form.checkValidity()) {
    form.reportValidity();
    return false;
}