It sounds like adding that submit button click handler introduced a critical issue that’s blocking all your client-side validation. Let’s walk through the most likely culprits and how to fix them:

1. Syntax Error in Your validateForm() Function #

Looking at your code snippet, I notice you used .val() at the end of the email input line—that’s a jQuery method, not vanilla JavaScript. If you’re using plain JS to access form inputs, you need to use .value instead. A syntax error here would throw an uncaught exception, which stops all JavaScript execution on the page.

Fix: #

Replace any instances of .val() with .value:

function validateForm() {
  var firstName = document.forms["myForm"]["reg_fname"].value;
  var lastName = document.forms["myForm"]["reg_lname"].value;
  var u = document.forms["myForm"]["reg_username"].value;
  var e1 = document.forms["myForm"]["reg_email"].value; // Fixed here!
  // Rest of your validation logic...
}

2. Not Preventing the Form’s Default Submit Behavior #

If your submit button’s click handler doesn’t stop the form from submitting normally, the page might reload before your validation logic can run. This makes it seem like validation isn’t working, when in reality it’s just being cut short.

Fix: #

Add event.preventDefault() to your click handler (or use the form’s onsubmit event instead, which is more standard for form validation):

Option 1: Using Click Handler with Prevent Default

<button type="submit" onclick="validateForm(event)">Submit</button>

function validateForm(event) {
  event.preventDefault(); // Stop the form from submitting immediately
  // Your validation logic here...
  
  // If validation passes, manually submit the form:
  if (allFieldsAreValid) {
    document.forms["myForm"].submit();
  }
}

Option 2: Using Form’s onsubmit Event (Recommended)

This ties validation directly to the form’s submission process, not just the button click:

<form name="myForm" onsubmit="return validateForm()">
  <!-- Form inputs here -->
  <button type="submit">Submit</button>
</form>

function validateForm() {
  var firstName = document.forms["myForm"]["reg_fname"].value;
  // ... rest of validation ...
  
  // Return false to prevent submission if validation fails
  if (firstName === "") {
    alert("First name is required");
    return false;
  }
  // Return true to allow submission if all checks pass
  return true;
}

3. Overriding Built-in HTML5 Validation #

If you’re using HTML5 validation attributes (like required, type="email"), adding a custom click handler might bypass these checks entirely. Make sure your function respects the built-in validation before proceeding.

Fix: #

Check if the form is valid using checkValidity() before running your custom logic:

function validateForm(event) {
  event.preventDefault();
  const form = document.forms["myForm"];
  
  // First, check built-in HTML5 validation
  if (!form.checkValidity()) {
    form.reportValidity(); // Show default error messages
    return;
  }
  
  // Then run your custom validation logic...
}

4. Uncaught Errors in Validation Logic #

Even a small mistake (like a typo in a variable name, or trying to access an element that doesn’t exist) can throw an error and stop all JS execution. Use your browser’s developer tools (F12 > Console tab) to check for any error messages—they’ll point you directly to the problem.

How to Check: #

1. Open your browser’s DevTools (F12 or Ctrl+Shift+I).
2. Go to the Console tab.
3. Try submitting the form. Any errors will appear here with a line number, making it easy to fix.

Content of the question originates from Stack Exchange, question author Aman WD