gpt4 book ai didi

javascript - 无需提交的 HTML5 表单验证

转载 作者:行者123 更新时间:2023-11-30 14:50:42 25 4
gpt4 key购买 nike

对于注册页面,我正在尝试通过 Firebase 实现表单验证(例如,没有空字段)和电子邮件/密码验证(例如,电子邮件尚未被使用)。

下面是我希望在以前使用电子邮件创建帐户时发生的情况的图像。

Expected Behavior

但是,当前的问题是,如果 HTML5 客户端表单验证通过,它将在不通过 Firebase 服务器端电子邮件和密码验证的情况下提交。

理想情况下,点击注册后,它将通过表单验证 => Firebase 验证 => 表单提交。但是现在,逻辑是表单验证 => 提交 =/> Firebase 验证。

有没有办法在重置表单之前验证电子邮件/密码?


编辑 1:我创建了一个 jsfiddle为了方便。

已经创建了一个电子邮件为 test@test.com 的帐户,以表明在提交表单时,预先存在的电子邮件不会导致错误。


编辑 2:找到一个 solution !添加类型为提交的隐藏输入。

    #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();
}

最佳答案

这是在验证未完成之前阻止提交表单的演示...!使用“tushar”作为名字提交成功。

如果所有字段都经过验证,则返回 True,否则返回 false,这样您的表单将不会提交。

<!DOCTYPE html>
<html>
<body>

<form onsubmit="return toSubmit();">
First name:<br>
<input id="name" type="text" name="firstname" >
<br>
Last name:<br>
<input type="text" name="lastname" >
<br><br>
<button type="submit" >Submit</button>
</form>

<script>
function toSubmit(){
if(document.getElementById('name').value == "tushar"){
alert("success");
return true;
}
else{
alert("failed");
return false;
}
}
</script>
</body>
</html>

关于javascript - 无需提交的 HTML5 表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48144126/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com