title: How to disable bootstrap 4 validation style from valid controls
body: <p>I'm using bootstrap 4 styling for my application. Application has two text boxes and one submit button. When you click the "Save" button it will call a web API and get some details asynchronously(it will not redirect the page).
  Validation applied for the first text box only.</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>(function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
    &lt;title&gt;Test Page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form class="container needs-validation" novalidate&gt;
      &lt;div class="form-group row mt-5"&gt;
        &lt;label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label"&gt;Name&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="tel" class="form-control" placeholder="Please enter your name" required /&gt;
          &lt;div class="invalid-feedback"&gt;
            Please enter the name.
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row mt-5"&gt;
        &lt;label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label"&gt;Address:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="tel" class="form-control" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
        &lt;input type="submit" class="btn btn-primary" style="width: 100px;" value="Save" /&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My problem:</strong>  </p>
  
  <p>When I click the "Save" button without entering any values to the text boxes, green color style(validation true style) is applying to the "Address" textbox. I don't wont that to happen.  </p>
  
  <p>I only need red color style(validation failed style) to be applied if the validation is failed. If the values are entered(validation is true), I don't need any styling to be applied to the text boxes.  </p>
  
  <p>Also when I enter some value to the "Name" text box and click the "Save" button, I don't want green color styling for that text box.</p>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/MChR0.png" alt="Screenshot"></p>