# Spot the bug - #78

**URL:** <https://forum.kirupa.com/t/spot-the-bug-78/682484>\
**Category:** web dev\
**Created:** [July 7, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-78/682484 "2026-07-07T07:00:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [July 7, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-78/682484/1 "2026-07-07T07:00:10Z")

</div>

Can you spot the form bug?

```html
<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.

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [July 8, 2026, 7:40am UTC](https://forum.kirupa.com/t/spot-the-bug-78/682484/2 "2026-07-08T07:40:14Z")

</div>

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:

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

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

```