Bootstrap 5.0 使用 php 验证用户已存在于数据库中答案

【问题标题】：Bootstrap 5.0 validation with php where the user already exists in the databaseBootstrap 5.0 使用 php 验证用户已存在于数据库中
【发布时间】：2021-01-15 05:05:17
【问题描述】：

我的注册表单对 html 属性进行了基本验证，例如type = 'email' 等。它们通过 Bootstrap Validation 中的新功能很好地展示了样式。

当我将表单发送到 PHP 时出现问题。首先，数据通过 AJAX 到 PHP 以显示错误而不刷新页面，但是在检查时例如如果输入的电子邮件已经注册了否定结果，我的输入仍然标记为：有效（绿色突出显示）。我该怎么办

register.php

$success = false;
$error = false;
$mssg = "Error";

if(!isset($_POST['email']) && !isset($_POST['pass'])){
    $mssg = "Inputs are empty";
}else{

    //example result for database
    $used_email = "foo@email.com";

    // example validation
    if($_POST['email'] == $used_email){
        $error = 'email';
        $mssg = "Email is already taken!";
    }else $success=true;
    
        
}

header('Content-Type: application/json');
echo json_encode(array('success' => $success, 'error'=> $error, 'mssg' => $mssg));
exit;

(function (){
      $("#formregister").on('submit', function(ev){

        const form = $(this);
  
        ev.preventDefault();
        ev.stopPropagation();
  
        var obj= new Object;
        Object.keys(form[0].getElementsByTagName('input')).filter(function(key) {
          obj[form[0][key].id] = form[0][key].value;
        });
  
        if (this.checkValidity()) {
            $.ajax({
            type: "POST",
            url: "register.php",
            data: obj,
            cache: false,
            success: function(data) {
              if(!data.success) {
                if(data.error){
                  $("#"+data.error).addClass("is-invalid").focus();
                  $("#"+data.error).next().html(data.mssg);
                }else 
                  $("#result").attr("class", "alert alert-danger").html(data.mssg);
              }else{
                $("#result").html("Success");
                $("#result").attr("class", "alert alert-success");
              }
            }
            });
        }else form.find(":invalid").first().focus();

        form.addClass("was-validated");
      });

})();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<form class="needs-validation" id="formregister" novalidate>
        <div id="result"></div>
        <div class="mt-2">
          <label for="email" class="form-label">E-mail</label>
          <input type="email" class="form-control" id="email" required>
          <div class="invalid-feedback">123</div>
        </div>

        <div class="mt-2">
          <label for="pass" class="form-label">Password</label>
          <input type="password" class="form-control" id="pass" required>
          <div class="invalid-feedback"></div>
        </div>

        <div class="col-12 justify-content-end d-flex mt-4 mb-2">
          <button type="submit" class="btn btn-primary">Register</button>
        </div>
</form>
</div>

如果我在验证期间添加 .is-invalid 类，输入不会将其样式更改为红色。

Issue img

【问题讨论】：