title: Bootstrap 5.0 validation with php where the user already exists in the database
body: <p>my registration form has basic validation for html attributes, e.g. type = 'email' etc. They display nicely styled by the new feature in Bootstrap Validation.</p>
  <p>The problem occurs when I send the form to PHP. First, the data goes through AJAX to PHP to display errors without refreshing the page, but when checking e.g. if the entered email is already registered with a negative result, my input is still marked as: valid (green highlight). What should I do</p>
  <p><strong>register.php</strong></p>
  <pre><code>$success = false;
  $error = false;
  $mssg = &quot;Error&quot;;
  
  if(!isset($_POST['email']) &amp;&amp; !isset($_POST['pass'])){
      $mssg = &quot;Inputs are empty&quot;;
  }else{
  
      //example result for database
      $used_email = &quot;foo@email.com&quot;;
  
      // example validation
      if($_POST['email'] == $used_email){
          $error = 'email';
          $mssg = &quot;Email is already taken!&quot;;
      }else $success=true;
      
          
  }
  
  header('Content-Type: application/json');
  echo json_encode(array('success' =&gt; $success, 'error'=&gt; $error, 'mssg' =&gt; $mssg));
  exit;
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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");
        });
  
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
  &lt;form class="needs-validation" id="formregister" novalidate&gt;
          &lt;div id="result"&gt;&lt;/div&gt;
          &lt;div class="mt-2"&gt;
            &lt;label for="email" class="form-label"&gt;E-mail&lt;/label&gt;
            &lt;input type="email" class="form-control" id="email" required&gt;
            &lt;div class="invalid-feedback"&gt;123&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="mt-2"&gt;
            &lt;label for="pass" class="form-label"&gt;Password&lt;/label&gt;
            &lt;input type="password" class="form-control" id="pass" required&gt;
            &lt;div class="invalid-feedback"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-12 justify-content-end d-flex mt-4 mb-2"&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Register&lt;/button&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If I add <strong>.is-invalid</strong> class during validation, input doesn't change its style to red.</p>
  <p><a href="https://i.stack.imgur.com/WKpQk.png" rel="nofollow noreferrer">Issue img</a></p>