# Spot the bug - #69

**URL:** <https://forum.kirupa.com/t/spot-the-bug-69/682331>\
**Category:** web dev\
**Created:** [June 28, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-69/682331 "2026-06-28T07:00:09Z")\
**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:** [June 28, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-69/682331/1 "2026-06-28T07:00:09Z")

</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:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [June 29, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-69/682331/2 "2026-06-29T07:20:15Z")

</div>

Two things are broken here: you never stop the submit, and `email` is a sketchy global. Right now it’ll alert “invalid” and still submit/reload because you don’t call `e. preventDefault()`. And `email. value` only “works” in some browsers because elements with an `id` sometimes get exposed as globals; in strict/module code it’ll just be a `ReferenceError`.

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

```