Spot the bug - #78

programming web dev
1

Can you spot the form bug?

<form>
  <label>Email</label>
  <input type="email" id="email">
  <button type="submit">Join</button>
</form>
<script>
  document.querySelector('form').addEventListener('submit', (e) => {
    if (!email.value.includes('@')) alert('invalid');
  });
</script>

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

2

Your handler never stops the submit, so the form will happily submit even after you alert. That’s the part that gets me, because you’ll flash “invalid” and then immediately navigate away. Fix is to call preventDefault() when it’s invalid, and grab the input explicitly instead of relying on the id becoming a global:

const emailEl = document.querySelector('#email');

document.querySelector('form').addEventListener('submit', (e) => {
  if (!emailEl.value.includes('@')) {
    e.preventDefault();
    alert('invalid');
  }
});