客户端表单验证失效+表单元素无法编辑问题排查求助

Let's work through your problems step by step—first fixing the critical syntax error in your JavaScript, then addressing the CSS and other potential issues:

1. Fix JavaScript Syntax Errors #

Your code has two syntax mistakes that are preventing the validation from running at all:

• Extra closing parenthesis in the submit event handler declaration: function(event)) { should be function(event) {
• Missing closing }); at the end (you need two to close both the submit handler and the $(document).ready callback)

Here's the corrected 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(); 
    } 
  }); 
});

2. Ensure jQuery is Loaded #

Since you're using the $ shorthand, you must include the jQuery library before your custom script. Add this line somewhere in your HTML (preferably right before the closing </body> tag):

<script src="path/to/your/jquery.min.js"></script>

Make sure the path points to a valid jQuery file (either hosted locally or from a trusted source).

3. Fix CSS Style Issues #

Your CSS uses custom variables that aren't defined in your code snippet, which is why the styles aren't applying:

• var(--color-border): Define this variable in your global CSS (usually in a :root selector)
• var(--font-ubuntu): Make sure this font variable is defined and the Ubuntu font is loaded (via @import or a link tag)

Add this to your CSS to resolve the variable issues:

:root {
  --color-border: #cccccc; /* Adjust to your preferred border color */
  --font-ubuntu: 'Ubuntu', sans-serif;
}

/* Load Ubuntu font if you haven't already */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

Also, ensure your custom CSS file is loaded after Bootstrap's CSS, so your styles override Bootstrap's default form-control styles.

4. Optional: Add Real-Time Validation #

For a better user experience, you can add real-time validation as the user types, instead of only checking on form submit:

$('#confirmPass').on('input', function() {
  const password = $('#password').val();
  const confirmPass = $(this).val();
  const errorElement = $('#confirmError');
  
  if (password !== confirmPass) {
    errorElement.text("Passwords don't match");
  } else {
    errorElement.text("");
  }
});

These fixes should resolve both your password validation and CSS styling issues.

内容的提问来源于stack exchange，提问作者Prakhar Rathi