Bootstrap 5.0 验证 php 其中用户已存在于数据库中

Question

我的注册表单对 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 class，输入不会将其样式更改为红色。

Issue img

Answer 1

关于 STAYS GREEN 问题：

服务器验证后，您必须将 AJAX 或 PHP 输入的 class 更改为 .is-invalid 为获得错误的红色样式 - 或 .is-valid 以获得正确的值。

您可以使用 向用户提供额外提示。这些 class 也支持无效反馈 。

示例可以在这里找到： https://getbootstrap.com/docs/5.0/forms/validation/#server-side

为了获得更多帮助，我们需要您的 PHP 代码

更新：您正在使用 BS5 测试版。

V5.0现已发布。

立即获取，希望他们修复了该错误。 https://getbootstrap.com/docs/5.0/getting-started/download/

Answer 2

我找到了解决办法！ :invalid 和 :valid 属性比 class 具有样式优势，因此 .is-invalid class 必须有带 !important 的边框属性。

对于以后遇到类似问题的人。

需要添加到 boostrap.css .is-invalid 和 .is-valid -> !important

Bootstrap 5.0 验证 php 其中用户已存在于数据库中

Bootstrap 5.0 validation with php where the user already exists in the database

javascript

php

bootstrap-5