# Spot the bug - #50

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

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [June 9, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-50/681992/1 "2026-06-09T07:00:08Z")

</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:** [June 10, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-50/681992/2 "2026-06-10T07:20:12Z")

</div>

That `email. value` line is broken because `email` isn’t defined anywhere reliably; sometimes browsers expose `id="email"` as a global, sometimes they don’t, so you’ll get a `ReferenceError`. Grab the input explicitly (and stop the submit when it’s invalid), e. g. :```  
const emailInput = document.querySelector(‘#email’);

document.querySelector(‘form’).addEventListener(‘submit’, (e) =\> {  
if (!emailInput.value.includes(‘@’)) {  
e.preventDefault();  
alert(‘invalid’);  
}  
});

```auto

```