无需提交的 HTML5 表单验证答案

【问题标题】：HTML5 Form Validation Without Submission无需提交的 HTML5 表单验证
【发布时间】：2018-06-17 01:37:30
【问题描述】：

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

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

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

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

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

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

已创建一个电子邮件 test@test.com 的帐户，以表明现有电子邮件在提交表单时不会导致错误。

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

【问题讨论】：

您的代码看起来是正确的，但只是 window.onload = firebase.auth().signOut(); 行看起来很奇怪。 你可以通过删除这一行来测试吗....！
我删除了该行，点击“注册”后表单重置的问题仍然存在，无论邮箱是否已被使用或密码不够强。
按照以下说明更改您的代码...！

标签： javascript html firebase firebase-authentication

【解决方案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>

【讨论】：

是的，test@test.com 已经是一个已经被使用的邮箱了。但是，如果所有字段都不为空，并且单击了注册按钮，则表单会重置，而不会提醒用户电子邮件无效（如图所示）。
感谢您的更新；我发现阻止自动提交的一种方法是显式添加 type="button"，因为通过在表单中放置任何按钮，其默认类型是“提交”。更改反映在here。但是，我注意到“请填写此表格”弹出窗口现在消失了。虽然它很小，有没有办法把它找回来？
酷...只需将类型从button 更改为submit 然后“请填写此表格”弹出窗口就会出现......别忘了upVote & 标记为正确 我的答案....！ upVote 将帮助其他人解决他们的问题....！
但是，这会导致表单自动提交——因此不会弹出警告。
提到有问题的 jsfiddle 没有复制您的问题....！你改了吗...？

【解决方案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>

【讨论】：