title: Client Side Form Validation not happening + can't edit form elements
body: <p>I am not able to perform client-side form validation. It's a simple check. I wanna make sure that the passwords are the same. This is the javascript code snippet that I am using for the same.</p>
  <pre><code>$(document).ready(function(e) {
  
    $(&quot;#reg-form&quot;).submit(function(event)) {
      let $password = $('#password');
      let $confirm = $('#confirmPass');
      let $error = $('#confirmError');
  
      if ($password.val() === $confirm.val()) {
        return true;
      } else {
        $error.text(&quot;Passwords don't match&quot;);
        event.preventDefault();
      }
    }
  
  })
  </code></pre>
  <p>Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue. However, I can't pinpoint the issue. This is my HTML Code.</p>
  <pre><code>&lt;div class=&quot;d-flex justify-content-center&quot;&gt;
    &lt;form class=&quot;reg-form&quot; id=&quot;reg-form&quot; enctype=&quot;multipart/form-data&quot; action=&quot;register.php&quot; method=&quot;post&quot;&gt;
  
      &lt;div class=&quot;form-row&quot;&gt;
  
        &lt;div class=&quot;col&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;firstName&quot; id=&quot;firstName&quot; class=&quot;form-control&quot; value=&quot;&quot; placeholder=&quot;First Name*&quot; required&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;lastName&quot; id=&quot;lastName&quot; class=&quot;form-control&quot; value=&quot;&quot; placeholder=&quot;Last Name*&quot; required&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class=&quot;form-row my-4&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;
          &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot; class=&quot;form-control&quot; value=&quot;&quot; placeholder=&quot;Email*&quot; required&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-row my-4&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;
          &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; class=&quot;form-control&quot; value=&quot;&quot; placeholder=&quot;Password*&quot; required&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-row my-4&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;
          &lt;input type=&quot;password&quot; name=&quot;confirmPass&quot; id=&quot;confirmPass&quot; class=&quot;form-control&quot; value=&quot;&quot; placeholder=&quot;Confirm Password*&quot; required&gt;
          &lt;small id=&quot;confirmError&quot; class=&quot;text-danger&quot;&gt;&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-check form-check-inline&quot;&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;agreement&quot; class=&quot;form-check-input&quot; value=&quot;&quot; required&gt;
        &lt;label for=&quot;agreement&quot; class=&quot;form-check-label font-ubuntu text-black-50&quot;&gt; I agree to the Terms and Conditions*&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;submit-btn text-center my-5&quot;&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-warning rounded-pill text-dark px-5&quot; name=&quot;button&quot;&gt;Continue&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  <p>The following is the CSS code that I tried to work with.</p>
  <pre><code>#reg-form input[type=&quot;text&quot;],
  #reg-form input[type=&quot;email&quot;] {
      border-radius: unset;
      border: none;
      border-bottom: 1px solid var(--color-border);
      font-family: var(--font-ubuntu);
      font-size: 18px;
  }
  </code></pre>