title: bootstrap 4 validation with password confirmation and submit disabled until form validated (Registration form)
body: <p>In a simple form there are 3 input fields with regex pattern in each.<br>
  Two of them ('Password' and 'Confirm Password') must match. If the don't, a message "Not Matching" is displayed. If they do, "Valid" is displayed.  </p>
  
  <p>How can I (via the javascript) force the Bootstrap 4 validation's red border and 'X' icon to be displayed in the following case :  </p>
  
  <p>Entering 'aa' in the 'Password' field (it matches the regex hence the valid green border and V icon).<br>
  Entering 'aa' in the 'Confirm Password' field (it matches the regex hence the valid green border and V icon).<br>
  Now I add another character to 'Confirm Password' and it immediately displays "Not Matching", but since it's ok according to the regex - it is still green with a 'V' icon.  </p>
  
  <p><a href="https://i.stack.imgur.com/c2NZy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c2NZy.jpg" alt="enter image description here"></a></p>
  
  <p>I need to force the red border and 'X' icon when this happens.  </p>
  
  <p>My code :</p>
  
  <pre><code>      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
    &lt;style&gt;
      input[type="submit"]:disabled {
        background-color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container mt-2"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4 offset-md-4"&gt;
          &lt;form action="page2.php" id="myForm1" class="needs-validation" novalidate&gt;
            &lt;div class="form-group"&gt;
              Field1&lt;input type="text" class="form-control" pattern="^[a-z]{2,4}$" required autofocus&gt;
              &lt;div class="valid-feedback"&gt;Valid&lt;/div&gt;
              &lt;div class="invalid-feedback"&gt;a to z only (2 to 4 long)&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              Password&lt;input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,4}$" required&gt;
              &lt;div class="valid-feedback"&gt;Valid&lt;/div&gt;
              &lt;div class="invalid-feedback"&gt;a to z only (2 to 4 long)&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              Confirm Password&lt;input type="text" id="cPwdId" class="form-control" pattern="^[a-z]{2,4}$" required&gt;
              &lt;div id="cPwdValid" class="valid-feedback"&gt;Valid&lt;/div&gt;
              &lt;div id="cPwdInvalid" class="invalid-feedback"&gt;a to z only (2 to 4 long)&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function(){
        // Check if passwords match
        $('#pwdId, #cPwdId').on('keyup', function () {
          if ($('#pwdId').val() != '' &amp;&amp; $('#cPwdId').val() != '' &amp;&amp; $('#pwdId').val() == $('#cPwdId').val()) {
            $("#submitBtn").attr("disabled",false);
            $('#cPwdValid').show();
            $('#cPwdInvalid').hide();
            $('#cPwdValid').html('Valid').css('color', 'green');
          } else {
            $("#submitBtn").attr("disabled",true);
            $('#cPwdValid').hide();
            $('#cPwdInvalid').show();
            $('#cPwdInvalid').html('Not Matching').css('color', 'red');
            }
          });
        let currForm1 = document.getElementById('myForm1');
          // Validate on submit:
          currForm1.addEventListener('submit', function(event) {
            if (currForm1.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            currForm1.classList.add('was-validated');
          }, false);
          // Validate on input:
          currForm1.querySelectorAll('.form-control').forEach(input =&gt; {
            input.addEventListener(('input'), () =&gt; {
              if (input.checkValidity()) {
                input.classList.remove('is-invalid')
                input.classList.add('is-valid');
              } else {
                input.classList.remove('is-valid')
                input.classList.add('is-invalid');
              }
              var is_valid = $('.form-control').length === $('.form-control.is-valid').length;
              $("#submitBtn").attr("disabled", !is_valid);
            });
          });
        });
      &lt;/script&gt;
  </code></pre>
  
  <p>Thank you!</p>