# Spot the bug - #71

**URL:** <https://forum.kirupa.com/t/spot-the-bug-71/682359>\
**Category:** web dev\
**Created:** [June 30, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-71/682359 "2026-06-30T07:00:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [June 30, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-71/682359/1 "2026-06-30T07: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 1, 2026, 7:40am UTC](https://forum.kirupa.com/t/spot-the-bug-71/682359/2 "2026-07-01T07:40:15Z")

</div>

Your submit handler never cancels the submit, so you’ll still post/navigate even after yelling “invalid” (and depending on the browser, `email` being a magic global from `id="email"` is flaky). Grab the element explicitly and call `preventDefault()` when it’s bad.

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

```

Tradeoff: you’re duplicating what `type="email"` already does, so I’d usually lean on native validation unless you need custom rules/messages.