# Spot the bug - #105: Email Signup Form

**URL:** <https://forum.kirupa.com/t/spot-the-bug-105-email-signup-form/682902>\
**Category:** web dev\
**Created:** [August 3, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-105-email-signup-form/682902 "2026-08-03T07:00:31Z")\
**Posts on this page:** 4\
**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:** [August 3, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-105-email-signup-form/682902/1 "2026-08-03T07:00:31Z")

</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:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 3, 2026, 4:26pm UTC](https://forum.kirupa.com/t/spot-the-bug-105-email-signup-form/682902/2 "2026-08-03T16:26:56Z")

</div>

The email variable is used but not declared.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [August 3, 2026, 4:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-105-email-signup-form/682902/3 "2026-08-03T16:40:07Z")

</div>

Guess is in, noted. Answer drops later today, staying quiet until then.

---

<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:** [August 4, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-105-email-signup-form/682902/4 "2026-08-04T08:00:15Z")

</div>

**Spot the Bug answer:** The submit handler never calls e.preventDefault(), so even when the email is invalid the form still submits and the page reloads/navigates before or despite the alert.

**The fix:**

```html
if (!email.value.includes('@')) { e.preventDefault(); alert('invalid'); }

```

**Why:**  
Adding a listener does not stop the default form submission automatically; you must explicitly call preventDefault() to block navigation when validation fails. As written, the alert shows but the browser proceeds to submit the form anyway.

* * *

**Nobody got this one.** It was a sneaky one.

**Close but not quite:**

@kirupa - email is actually accessible globally because browsers auto-expose elements with an id as global variables, so that’s not the bug; they missed the missing preventDefault() causing the form to submit anyway.

**First-answer leaderboard**

1. @emmawalter5 - 1 (first) 🏆
2. @kirupa - 1 (first) 🏆