How does HTML & CSS handle required field?

Which stacks cover "required field" on this page?

HTML & CSS, React. Together they hold 2 copy-ready snippets for this task.

Required field

2 snippets across 2 stacks - HTML & CSS, React

HCHTML & CSS

Form Validation Attributes

HC · Forms

Syntax

required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"

Example

<input type="text" name="zipcode" required pattern="[0-9]{5}" title="Five digit zip code">

<input type="password" name="password" required minlength="8" maxlength="128">

<input type="number" name="age" min="18" max="120">

Note Built-in validation runs on form submission and is bypassed by adding formnovalidate to the submit button or novalidate to the form. The title attribute provides a hint message shown when the pattern fails.

REReact

Validation Patterns

RE · Forms

Syntax

// Validate on change, blur, or submit
const errors = {};
if (!value) errors.field = 'Required';

Example

function SignupForm() {
  const [fields, setFields] = useState({ name: '', email: '', age: '' });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  function validate(data) {
    const errs = {};
    if (!data.name.trim()) errs.name = 'Name is required';
    if (!data.email.includes('@')) errs.email = 'Invalid email';
    if (Number(data.age) < 18) errs.age = 'Must be at least 18';
    return errs;
  }

  function handleChange(field, value) {
    const updated = { ...fields, [field]: value };
    setFields(updated);
    if (touched[field]) {
      setErrors(validate(updated));
    }
  }

  function handleBlur(field) {
    setTouched(prev => ({ ...prev, [field]: true }));
    setErrors(validate(fields));
  }

  function handleSubmit(e) {
    e.preventDefault();
    const errs = validate(fields);
    setErrors(errs);
    setTouched({ name: true, email: true, age: true });
    if (Object.keys(errs).length === 0) {
      submitSignup(fields);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={fields.name}
        onChange={e => handleChange('name', e.target.value)}
        onBlur={() => handleBlur('name')}
      />
      {touched.name && errors.name && <span>{errors.name}</span>}
      {/* repeat for other fields */}
      <button type="submit">Sign Up</button>
    </form>
  );
}

Note Validate on blur for a good UX: users see errors after leaving a field, not while typing. On submit, validate everything and mark all fields as touched. For complex forms, consider a form library or useReducer.

Frequently asked questions

How does HTML & CSS handle required field?: This task is covered in 2 stacks on this page: HTML & CSS, React. The "Form Validation Attributes" snippet in HTML & CSS uses `required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"`.
Which code does the HTML & CSS example use?: The "Form Validation Attributes" snippet uses `required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"`, from the Forms section of the HTML & CSS cheat sheet.
Which stacks cover "required field" on this page?: HTML & CSS, React. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?: Yes. For "Form Validation Attributes": Built-in validation runs on form submission and is bypassed by adding formnovalidate to the submit button or novalidate to the form. The title attribute provides a hint message shown when the pattern fails.