Forms: Validation and Required Fields

intermediate

By FrontendAtlas Editorial · 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.

Solution

Overview

Native HTML validation should enforce required fields and correct formats before submission. Using type=email, minlength, and pattern rules lets the browser handle most validation without custom JS. The existing JS and CSS rely on these attributes, so changing markup is the key step and should be kept minimal and precise.

Approach 1 – Attribute-driven validation

Wire labels to inputs with for/id, add required to all fields, set type=email on the email input, and apply minlength and pattern to the password. Keep the provided JS and CSS unchanged so the built-in validation UI is used and tests pass reliably. Ensure each input has a label for accessibility.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        Signup Form Validation
      </title>
    </head>
    <body>
      <h1>
        Signup Form
      </h1>
      <form aria-label='Signup form'>
        <label for='name'>
          Name
        </label>
        <input id='name' name='name' type='text' required autocomplete='name' />
        <label for='email'>
          Email
        </label>
        <input id='email' name='email' type='email' required autocomplete='email' />
        <label for='password'>
          Password
        </label>
        <input
        id='password'
        name='password'
        type='password'
        required
        minlength='8'
        autocomplete='new-password'
        pattern='(?=.*[A-Z])(?=.*\d).{8,}'
        title='At least 8 characters, including 1 uppercase letter and 1 number.'
      />
        <button type='submit'>
          Sign up
        </button>
        <p id='status' aria-live='polite'>
        </p>
      </form>
      <script>

      (function () {
        const get = (sel) => document.querySelector(sel);

        const init = () => {
          const form = get('form');
          const status = get('#status');
          if (!form || !status) return;

          form.addEventListener('submit', (e) => {
            e.preventDefault();

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

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

        init();
        window.addEventListener('DOMContentLoaded', init);
      })();
    

</script>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}
form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 340px;
}
label {
  font-weight: 500;
}
input {
  padding: 0.4rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 0.5rem;
  background: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #005fa3;
}
#status {
  font-weight: 600;
  margin-top: 0.25rem;
}

Notes & Pitfalls

Pitfalls

Missing for/id pairing makes labels less accessible and breaks click-to-focus behavior.
A pattern that is too strict can block valid user input; test it with real examples.
Using novalidate disables browser validation APIs like reportValidity().

Techniques

Use type="email" for built-in email validation.
Use minlength + pattern for password policies.
Add autocomplete tokens (name/email/new-password) for faster form filling.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep