Spot the bug - #188: Textbox

programming web dev
1

Tiny regex quest hides a subtle flaw.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Spot the Bug: Regex Edition</title>
  <style>
    body { font-family: sans-serif; padding: 1rem; }
    .box { border: 1px solid #ccc; padding: 1rem; width: 320px; }
    input { width: 100%; padding: .25rem; }
    .result { margin-top: .5rem; font-family: monospace; }
  </style>
</head>
<body>
  <div class="box">
    <label>Enter a simple alphanumeric string (letters or digits only):</label>
    <input id="inp" type="text" />
    <div class="result" id="out"></div>
  </div>
  <script>
    const input = document.getElementById('inp');
    const out = document.getElementById('out');
    // Bug: the regex uses a capturing group but the test ignores it; also
    // the pattern mistakenly allows spaces due to an incorrect flag setup.
    const regex = /^(?:[A-Za-z0-9]+)\s*$/; // intended: without spaces
    input.addEventListener('input', function() {
      const value = input.value;
      if (regex.test(value)) {
        out.textContent = 'VALID: ' + value;
      } else {
        out.textContent = 'INVALID: ' + value;
      }
    });
  </script>
</body>
</html>

Reply with what is broken and how you would fix it.