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

我想让用户只在用户不存在时才提交表单。为此，我构建了一些休息API，以检查输入模糊或表单提交中输入的用户是否已存在。这工作使用自定义有效性的异步表单验证

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

问题1：通过按压进入提交表单时，不显示的输入无效的消息

问题2（I可以手动触发形式来显示所述有效性信息）：输入当一个无效的名字，提交然后输入一个有效的名字并再次提交，验证错误消息很快出现，然后消失。（由于的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) 
})

预先感谢您

最佳，马丁

来源

2017-08-08 Martin Muzatko

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

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

来源

2017-08-08 08:41:03

谢谢。 'isUserValid'不会异步检查用户的有效性，所以我不知道用户是否有效，直到我执行该检查（但是后来我知道，所以我不再需要'checkValidity'）。但是checkValidity只返回true或false，它不会让有效性消息出现。我刚发现'reportValidity（）'也显示了有效性信息。 –

那么你想解决这个问题呢？ –

请亲自看看：https://codepen.io/MartinMuzatko/pen/eEvyYK?editors=1010和https://media.giphy.com/media/l41K48Jb6rbT9SxSE/giphy.gif 有效期延迟，正确的值可以不会被提交 - 因为验证检查被延迟，并且当输入无效时提交事件不会被触发。 –

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

回答

相关问题