手动触发HTML5表单验证

Question

我有一个传统表单，现在想要更新为使用简单的HTML5表单验证。

目前，它使用reCaptcha，并调用verify()函数来验证reCaptcha挑战，然后转发表单内容。我想确保在继续reCaptcha处理之前，表单通过HTML5验证，并显示浏览器默认使用的适当错误消息。

包含表单的iframe具有文档类型。输入字段具有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;
}

虽然表格没有被提交，但屏幕上没有显示任何错误，也没有告诉用户应该提供哪些字段。

我看过这个jsfiddle [http://jsfiddle.net/5ycZz/] 来演示checkValidity()函数，但即使在Chrome、IE10或FF中也没有显示我期望看到的视觉错误提示。

- Reuben

Answer 1

尝试将提交事件设置在表单上，而不是在提交按钮上添加点击操作。 submit 事件会在验证后触发，因此仅当所有其他约束条件通过时才会发生。这也意味着您不必在 verify 函数中调用 form.checkValidity()。

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

- SpliFF

---

我为表单添加了onsubmit，并将按钮的<input>类型更改为submit。但是，在表单验证之前，似乎仍然会调用verify函数。 - Reuben

哪个浏览器？我已经确认它在FF中可以工作。检查fiddle：http://jsfiddle.net/BqW9D/。也许你忘记删除你的onclick操作了？ - SpliFF

其实，我是个傻瓜。没意识到（遗留的）表单重定向到了不同的URL（恰好是现场网站，而不是我的开发环境）。这种方法肯定有效！ - Reuben

Answer 2

This solving trouble:

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

- Dmitry Shashurov