Client Side Form Validation not happening + can't edit form elements

Question

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.

$(document).ready(function(e) {

  $("#reg-form").submit(function(event)) {
    let $password = $('#password');
    let $confirm = $('#confirmPass');
    let $error = $('#confirmError');

    if ($password.val() === $confirm.val()) {
      return true;
    } else {
      $error.text("Passwords don't match");
      event.preventDefault();
    }
  }

})

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.

<div class="d-flex justify-content-center">
  <form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">

    <div class="form-row">

      <div class="col">
        <input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
      </div>
      <div class="col">
        <input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
      </div>

    </div>

    <div class="form-row my-4">
      <div class="col">
        <input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
      </div>
    </div>

    <div class="form-row my-4">
      <div class="col">
        <input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
      </div>
    </div>

    <div class="form-row my-4">
      <div class="col">
        <input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
        <small id="confirmError" class="text-danger"></small>
      </div>
    </div>

    <div class="form-check form-check-inline">
      <input type="checkbox" name="agreement" class="form-check-input" value="" required>
      <label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
    </div>

    <div class="submit-btn text-center my-5">
      <button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
    </div>
  </form>

The following is the CSS code that I tried to work with.

#reg-form input[type="text"],
#reg-form input[type="email"] {
    border-radius: unset;
    border: none;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-ubuntu);
    font-size: 18px;
}

Answer 1

I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code; but your code itself looks like it works with the correct markup on the JS, please see below:

 $(document).ready(function() { $("#reg-form").submit(function(e) { let $password = $('#password'); let $confirm = $('#confirmPass'); let $error = $('#confirmError'); if ($password.val() === $confirm.val()) { console.log(true); return true } else { e.preventDefault(); $error.text("Passwords don't match"); } }) })

 #reg-form input[type="text"], #reg-form input[type="email"] { border-radius: unset; border: none; border-bottom: 1px solid var(--color-border); font-family: var(--font-ubuntu); font-size: 18px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="d-flex justify-content-center"> <form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post"> <div class="form-row"> <div class="col"> <input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required> </div> <div class="col"> <input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required> </div> </div> <div class="form-row my-4"> <div class="col"> <input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required> </div> </div> <div class="form-row my-4"> <div class="col"> <input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required> </div> </div> <div class="form-row my-4"> <div class="col"> <input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required> <small id="confirmError" class="text-danger"></small> </div> </div> <div class="form-check form-check-inline"> <input type="checkbox" name="agreement" class="form-check-input" value="" required> <label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label> </div> <div class="submit-btn text-center my-5"> <button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button> </div> </form> </div>