Form validaton demo

For longer forms provide a list of errors at the top that need to be addressed:

  • Birthdate: Use the order year, month, day.
  • Your email: This required field was left empty.
  • Username: Must be at least six characters.
  • Event Date: Please pick an event date in the future
  • You must agree to the privacy policy.

Note

When a label includes a field note, adding mzp-is-error to a parent element will highlight it.

Message

Use the message component to add additonal information to the page help with form validation.

You must agree to our privacy policy before we can add you to the newsletter.

Other components

Examples of error messages with other components.

Fieldset
Message for this field set.

Details for this field set.

Choices (in this case checkboxes)
Message for this group of choices

Details for this set of choices.

Message for this single checkbox