Question

对于注册页面，我尝试通过Firebase实施表单验证（例如，没有空字段）和电子邮件/密码验证（例如，电子邮件尚未使用）。

以下是我之前使用过电子邮件创建帐户时想要发生的事情的图片。

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

理想情况下，点击注册后，它将通过表单验证=＆gt; Firebase验证=＆gt;表格提交。但是现在，逻辑是形式验证=＆gt;提交= /＆gt; Firebase validaiton。

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

编辑1 ：为方便起见，我创建了jsfiddle。

电子邮件test@test.com上的帐户已经过，表明预先存在的电子邮件在提交表单时不会导致错误。

编辑2 ：找到solution！添加类型为submit的隐藏输入。

11110xxx

Answer 1

我见过你的jsfiddle，问题是由于点击提交按钮后自动提交表单。如果您的验证失败，那么您应该阻止提交事件。

我不知道提交事件的确切原因，但为了防止自动提交事件，我已从提交按钮中删除了class="btn glow-button"。

当您使用firebase时，所有操作都将异步完成，您不需要在服务器上提交您的页面......！

在代码下面插入，我希望它能正常工作。

    <form id="signup-form">

        <div class="line input-group"> 
            <input id="firstname" type="text" placeholder="First name" class="focus" required>
            <input id="lastname" type="text" placeholder="Last name" class="focus" required>
        </div>

        <div class="line input-group"> 
            <input id="email" type="text" placeholder="Enter your email" class="focus" required>
        </div>

        <div class="line input-group">
            <input id="password" type="password" placeholder="Create your password" class="focus" required>
        </div>

        <div class="alert" id="email-error">
            <p>An account has already been registered with this email. <a href="/sign-in.html">Log in</a> to your account.</p>
        </div>

        <div class="alert" id="passw-error">
            <p>Password is too weak. 6 characters or longer required.</p>
        </div>

        <!-- this code-block commented
        <div class="line input-group">
            <button id="signup" class="btn glow-button">Sign Up</button>
        </div>
        -->

        <!-- this is code-block is added-->
        <div class="line input-group">
            <button id="signup" class="">Sign Up</button>
        </div>          

    </form>

Answer 2

这是阻止提交表单的演示，直到验证没有完成......！使用“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>

没有提交的HTML5表单验证

2 个答案: