title: TextBox change the color after wrong submission
body: <p>I try to create bootstrap form which will after wrong submission change the color of the borders to the red. The Problem is that textbox it will always stay in red. Any ideas how can I set the textbox borders red after wrong input. Is there any class in bootstrap that will automatically output that borders in red color after wrong input?</p>
  <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>if ($('#TextBoxID').val() == '') {
    $('#TextBoxID').css('border-color', 'red');
  } else {
    $('#TextBoxID').css('border-color', ''); 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&amp;display=swap" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"&gt;
      
      &lt;div class="sign-up container"&gt;
          &lt;h2&gt;Sign Up&lt;/h2&gt;
          &lt;p&gt;Please fill this form to create an account.&lt;/p&gt;
          &lt;form action="" method="post"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Username&lt;/label&gt;
                  &lt;input id="TextBoxID" type="text" name="username" class="form-control" value=""&gt;
                  &lt;span class=" text-danger"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;input type="password" name="password" class="form-control" value=""&gt;
                  &lt;span class="text-danger"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Confirm Password&lt;/label&gt;
                  &lt;input type="password" name="confirm_password" class="form-control" value=""&gt;
                  &lt;span class=" text-danger"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="submit" class="btn btn-primary" value="Submit"&gt;
                  &lt;input type="reset" class="btn btn-default" value="Reset"&gt;
              &lt;/div&gt;
              &lt;p&gt;Already have an account? &lt;a href="#"&gt;Login here&lt;/a&gt;.&lt;/p&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        
          &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>