Forms: Validation and Required Fields

intermediate

By FrontendAtlas Team · Updated Jan 30, 2026

Build a signup form using native HTML5 validation: required fields, type constraints, minlength, and pattern. The browser should block invalid submissions without custom JS changes, and existing JS/CSS should remain untouched for tests.

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions

<html> HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <title>Signup Form Validation</title>
  </head>
  <body>
    <h1>Signup Form</h1>
    <p style='color:#666'>Add inputs for Name, Email, and Password. Use HTML5 validation attributes (required, type, minlength, pattern) so the form is invalid until inputs are correct. Do not add novalidate. You don’t need to send data anywhere; focus on validation behavior.</p>

// Runs after you add the form markup.
        const init = () => {
          const form = get('form');
          const status = get('#status');
          if (!form || !status) return; // still waiting for user markup

form.addEventListener('submit', (e) => {
            // Keep user on the page; validation is the goal.
            e.preventDefault();

const valid = form.checkValidity();
            if (!valid) {
              form.reportValidity();
              status.textContent = 'Fix the highlighted fields.';
              return;
            }

status.textContent = 'Looks good ✅';
          });
        };

// Try now and after DOM updates.
        init();
        window.addEventListener('DOMContentLoaded', init);
      })();
    </script>
  </body>
</html>

# CSS

Live preview updates as you type

Building preview…