Spot the bug - #98: Submit Form

programming web dev
1

Password form validator silently lets bad input through.

const form = document.querySelector('#signupForm');
const pwInput = document.querySelector('#password');
const confirmInput = document.querySelector('#confirmPassword');
const errorBox = document.querySelector('#formError');

form.addEventListener('submit', (event) => {
  const pw = pwInput.value;
  const confirmPw = confirmInput.value;

  if (pw.length < 8 || pw !== confirmPw) {
    errorBox.textContent = 'Passwords must match and be 8+ characters.';
  }

  console.log('Form submitted with valid password');
});

Reply with what is broken and how you would fix it.

2

Missing event. preventDefault() and no return after the error, so the form submits and the page reloads even when validation fails. Also that console. log runs on every submit, valid or not, so the log message is just lying to you at that point.

3

Spot the Bug answer: The submit handler shows the error message but never calls event.preventDefault(), so the form submits regardless of validation failing.

The fix:

Add 'event.preventDefault(); return;' inside the if block before the console.log, e.g. if (pw.length < 8 || pw !== confirmPw) { errorBox.textContent = '...'; event.preventDefault(); return; }

Why:
Setting errorBox.textContent only updates the DOM, it does not stop the browser’s default form submission behavior. Without calling preventDefault (and returning early), the code falls through to the console.log line and the form still submits even when validation fails.