时间戳

首页 > 解决方案 > 使用获取响应的表单验证不起作用？

javascript - 使用获取响应的表单验证不起作用？

问题描述

我正在尝试通过使用获取请求并返回成功状态来检查用户凭据是否已存在于我们的数据库中来进行一些表单验证，但是当我与现有用户一起尝试时，它会将我转发到新页面无论如何，是否有解决方案或更好的方法

HTML 代码

<form name="myform" onsubmit="return validateUser()" method="post">
   <label style="padding-bottom: 0px;" class="form-label">Email address:</label>
    <input type="email" class="form-control" id="usrname" name="usrname" placeholder="name@example.com" required>
   <label style="padding-top: 10px;" class="form-label">Password:</label>
    <input type="password" required class="form-control" id="psw" placeholder="Password">
<button type="submit" class="btn  btn-primary">Sign Up</button>
</form>

JS

function validateUser() {
    let email = document.forms["myform"]["usrname"].value;
    let pass = document.forms["myform"]["psw"].value;
    var formattedEmail = email.replace("@", "%40");
    var status;
    var URL = `${baseURL}/sign_in?email=${formattedEmail}&password=${pass}`;
    fetch(URL,{method: 'POST'}).then(response => response.json())
    .then(data => {
    if(data.status== true){
        document.getElementById("error").innerHTML = "this email was already used";
        return false; 
    }else{
        //make the user account 
        //forward to the new page
  } 
    })
    .catch((error) => {
      console.error('Error:', error);
    });

标签： javascriptforms

解决方案

推荐阅读