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 
<form action="/join" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button>Join</button>
</form>
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.