Mozilla Protocol
  • 19.1.0

Error Messages

These tooltip-style messages are useful for supplemental error messages after a form has been validated, not for notes that would need to be shown before user interaction.

Error messages should be short and simple. They should indicate what the user needs to do to resolve the error, not simply state that an error occurred.

Bad example: “Invalid e-mail”

Good example: ”Provide a complete e-mail address, like “yourname@example.com””

Tips

  • Add the mzp-is-error class to any parent element to apply error styling to the form controls.
  • Connect the form field and the message with an aria-describedby attribute.
  • Add role="tooltip" to the message to improve accessbility.
<div class="mzp-c-field mzp-is-error">
    <label class="mzp-c-field-label" for="date">Date</label>
    <input class="mzp-c-field-control" type="text" name="date" id="date" value="May the 4th, &#39;22" required aria-required="true" aria-describedby="date-msg">
    <div id="date-msg" class="mzp-c-field-msg" role="tooltip">Must be in the format 2022-05-04</div>
</div>

<div class="mzp-c-choice mzp-is-error">
    <input class="mzp-c-choice-control" type="checkbox" name="accept-tos" id="accept-tos" value="" required aria-required="true" aria-describedby="accept-tos-msg">
    <label class="mzp-c-choice-label mzp-t-sm" for="accept-tos">I accept the terms and conditions.</label>
    <div class="mzp-c-choice-msg" id="accept-tos-msg" role="tooltip">You must accept terms and conditions to continue.</div>
</div>