客戶端表單驗證未發生 + 無法編輯表單元素

Question

我無法執行客戶端表單驗證。 這是一個簡單的檢查。 我想確保密碼相同。 這是我正在使用的 javascript 代碼片段。

$(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();
    }
  }

})

雖然，我不認為問題出在 javascript 代碼中，因為我嘗試設置表單中某些項目的樣式，但也沒有用，所以我認為這是一個 HTML 問題。 但是，我無法確定問題所在。 這是我的 HTML 代碼。

<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>

以下是我嘗試使用的 CSS 代碼。

#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

我發現 JavaScript 標記存在一些問題，缺少一些右括號，並且在代碼中過早聲明了右括號； 但是您的代碼本身看起來可以在 JS 上使用正確的標記，請參見下文：

 $(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>