# Spot the bug - #80

**URL:** <https://forum.kirupa.com/t/spot-the-bug-80/682521>\
**Category:** web dev\
**Created:** [July 9, 2026, 1:33am UTC](https://forum.kirupa.com/t/spot-the-bug-80/682521 "2026-07-09T01:33:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [July 9, 2026, 1:33am UTC](https://forum.kirupa.com/t/spot-the-bug-80/682521/1 "2026-07-09T01:33:02Z")

</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:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [July 10, 2026, 1:40am UTC](https://forum.kirupa.com/t/spot-the-bug-80/682521/2 "2026-07-10T01:40:13Z")

</div>

Two things are broken: you never call `e. preventDefault()`, so the form will still submit/reload after the alert, and `email` is an accidental global that won’t exist in strict/module contexts. Grab the input explicitly and stop the submit when invalid:

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

```