使用 Javascript 以 HTML5 输入验证的样式显示文本答案

【问题标题】：Show text using Javascript in the style of HTML5 input validation使用 Javascript 以 HTML5 输入验证的样式显示文本
【发布时间】：2015-09-11 15:00:32
【问题描述】：

我有一个包含多个输入的表单。我可以验证客户端的大部分输入，为此我使用 HTML5 的输入验证。不过，对于一个输入，我只能知道它是否是有效的服务器端。

在服务器说输入无效的情况下，我怎样才能为这个输入显示一条与其他 HTML5 的输入验证消息样式相同的消息？

【问题讨论】：

使用来自 ajax 返回的信息设置 input.validationMessage 和或 input.setCustomValidity()。这将允许您更改出现在本机验证错误消息中的文本，确保它在视觉上与其他消息匹配，并使其看起来统一和专业。
请对您的问题标题进行拼写检查。

标签： javascript html validation

【解决方案1】：

您可以使用 Ajax 请求将表单数据发送到服务器。然后服务器验证数据并返回成功或无效。然后使用 Javascript，您可以在返回无效时显示验证消息。

更新：这可以通过 Javascript 验证 API 完成。 .setCustomValidity() 方法可以被传递：一个空字符串。这会将字段设置为有效，因此 .checkValidity() 和 .validity.valid 将返回 true，或者一个包含错误消息的字符串，该错误消息将显示在消息气泡中（如果使用）。该消息还会将该字段标记为失败，因此 .checkValidity() 和 .validity.valid 将返回 false 并且将触发 invalid 事件。

来源：http://www.sitepoint.com/html5-forms-javascript-constraint-validation-api/

【讨论】：

"然后使用 Javascript，您可以在返回无效时显示验证消息。"是的，这就是我问的原因。我该怎么做？
“如何使用 AJAX”这个问题实在是太宽泛了。有很多关于使用 AJAX 将项目发送到服务器并获得响应的教程。但是您还需要有服务器代码来接收、处理和返回响应。您需要缩小目标问题的范围。
@mrunion 我不是在问 AJAX。我在询问如何使用 Javascript 在样式 HTML 的输入验证中显示消息。我不在乎页面是否必须刷新。
对不起，我误解了你的问题，但我用正确的信息更新了我的答案。