Question

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

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

问题1：按Enter键提交表单时不显示无效输入的消息（我可以手动触发表单显示有效性消息吗？）

问题2：输入无效名称时，提交然后输入有效名称并再次提交，很快就会显示验证错误消息，然后消失。（由于必须同步调用preventDefault，我应该在输入有效时重新提交表单并删除eventlistener以进行提交，这样表单会被提交吗？

我准备了一些小工具与你分享： 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)
})

提前谢谢！

最佳，马丁

Answer 1

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

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

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

1 个答案: