使用自定义有效性的异步表单验证答案

【问题标题】：Async form validation using custom validity使用自定义有效性的异步表单验证
【发布时间】：2018-01-15 17:25:51
【问题描述】：

我想让用户只提交表单，当用户不存在时。为此，我构建了一个小的 rest api 来检查输入的用户是否已经存在于输入模糊或表单提交中。这行得通

最棘手的部分是设置自定义有效性。我想尽可能地使用原生表单验证和错误处理。所以我动态设置和取消设置模式属性。

问题一：回车提交表单时不显示无效输入的信息（可以手动触发表单显示有效信息吗？）

问题2：输入无效名称，提交后输入有效名称再提交，验证错误信息很快出现，然后消失。（由于preventDefault必须被同步调用，我是否应该在输入有效时重新提交表单并删除提交的事件监听器，以便表单提交？

我准备了一个小codepen与大家分享： https://codepen.io/MartinMuzatko/pen/BdWmBg?editors=1010

这是关于我的问题的代码：

usernameInput.addEventListener('blur', async (e)=>{
    let isValid = await isUserValid(e.target)
    console.log(isValid)
})

form.addEventListener('submit', async (e)=>{
    e.preventDefault()
    let isValid = await isUserValid(usernameInput)
    console.log(isValid)
})

提前谢谢你！

最好，马丁

【问题讨论】：

标签： javascript ajax forms validation

【解决方案1】：

您可以使用 javasript checkValidity() 来触发验证。

form.addEventListener('submit', async (e)=>{
    e.preventDefault()
    e.target.checkValidity(); //this check
    let isValid = await isUserValid(usernameInput)
    console.log(isValid)
})

【讨论】：

谢谢。 isUserValid 会异步检查用户的有效性，所以在我执行该检查之前我不知道用户是否有效（但后来我知道了，所以我不再需要 checkValidity 了）。 checkValidity 但是只返回 true 或 false，它不会让有效性消息出现。我刚刚发现reportValidity() 也确实显示了有效性消息。
除了这个，你还想解决什么问题？
请自行查看：codepen.io/MartinMuzatko/pen/eEvyYK?editors=1010 和media.giphy.com/media/l41K48Jb6rbT9SxSE/giphy.gif 有效性延迟，无法提交正确的值 - 因为验证检查延迟并且输入时未触发提交事件无效。
另外，如果我模糊输入元素然后想提交，我不能，因为我打电话给preventDefault。所以我必须在值正确时删除表单事件处理程序？
@MartinMuzatkoK15tSoftware 我认为您想使用 keypress 事件来检查每次用户按下键以检查有效性