Validation and Submission

Required Email Validation

Browser Constraints

A join form adds an email input with built-in browser constraints before exposing the submit action.

Program

HTML form constraints are declarative. The browser can validate an email field before the request is submitted.

No custom JavaScript is needed for this built-in check.Form Validation Stateinput value -> browser check -> submit resultConstraint validation happens before the form request.emptytypedinvalidblockedvalidconstraint message appearsNo custom JavaScript is needed for this built-in check.
Figure: Browser constraint validation gates submit. Model source: books/html/08validation_submission/required_email_validation/diagrams/form_validation_state.semantic.json.
required_email_validation.html
Visuals: captured from real browser rendering
<form action="/join" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button>Join</button>
</form>

  1. Create the join form.

    An empty join form appears.
    The form action and method define the submission target.

  2. Label the email control.

    The form shows an Email label.
    The label points to the future email input id.

  3. Add an email-shaped input.

    An Email field appears with email validation semantics.
    The email type tells the browser what shape to validate.

  4. Require a non-empty value.

    The Email field is marked as required.
    The required attribute adds the empty-value constraint.

  5. Add the Join submit action.

    The complete join form shows Email and Join controls.
    The button gives the constrained form a visible submit action.
type email The email input type asks the browser to validate email-shaped text.
required The required attribute prevents an empty value from passing constraint validation.