首页 文章

没有提交的HTML5表单验证

提问于
浏览
0

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

下面是我之前使用电子邮件创建帐户时想要发生的图像 .

Expected Behavior

但是,当前的问题是,如果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 回答

  • 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>
    
  • 1

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

相关问题