Spot the bug - #61

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.

1 Like
2

Your handler never stops the submit, so it’ll still post/navigate even after the “invalid” alert. Call e. preventDefault() when it’s invalid (and probably grab the input explicitly instead of relying on the email global).

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

That “implicit globals from id” thing is the part that gets me—once this scales into components/iframes/strict mode, it becomes flaky in a way that’s hard to debug.

1 Like