对于注册页面,我正在尝试通过Firebase实施表单验证(例如,没有空字段)和电子邮件/密码验证(例如,尚未使用电子邮件) .
下面是我之前使用电子邮件创建帐户时想要发生的图像 .
但是,当前的问题是,如果HTML5客户端表单验证通过,它将提交而不通过Firebase服务器端电子邮件和密码验证 .
理想情况下,点击注册后,它将通过表单验证=> Firebase验证=>表单提交 . 但是现在,逻辑是表单验证=> submission = /> Firebase validaiton .
有没有办法在重置表单之前验证电子邮件/密码?
EDIT 1 :为方便起见,我创建了一个jsfiddle .
已发送电子邮件test@test.com的帐户,以表明在提交表单时预先存在的电子邮件不会导致错误 .
EDIT 2 :找到solution!添加类型为submit的隐藏输入 .
#validate {
display: none;
}
<form id="signup-form">
<div class="line input-group">
<input type="submit" id="validate"/>
<button id="signup" class="btn glow-button" type="button">Sign Up</button>
</div>
</form>
var form = document.getElementById('signup-form');
if (!form.checkValidity()) {
form.querySelector('#validate').click();
}
2 回答
我见过你的jsfiddle,问题是由于点击提交按钮后自动提交表单 . 如果您的验证失败,那么您应该阻止提交事件 .
我不知道提交事件的确切原因,但是为了防止自动提交事件我已经从提交按钮中删除了
class="btn glow-button"
.当您使用firebase时,所有操作都将异步完成,您无需在服务器上提交页面......!
在代码下面插入,我希望它能工作 .
这是阻止提交表单直到验证没有完成的演示......!使用“tushar”作为名字提交成功 .
如果所有字段都经过充分验证,则返回
True
否则返回false
,这样您的表单就不会提交 .