Custom Validation Errors | Webflow Forms

Published

January 28, 2023

Updated

On INPUT elements, setting the _title attribute typically allows you to add a message on top of the browser's own validation error message.

If you want to go deeper than that, you can use scripting with HTML5's _{setCustomValidity} API.

HTMLObjectElement.setCustomValidity

This API allows you to handle validation errors with a custom message. Since an INPUT can fail multiple ways simultaneously, HTML5 encapsulates this in an event object;


{
  valueMissing: true,
  typeMismatch: false,
  patternMismatch: false,
  tooLong: false,
  tooShort: false,
  rangeUnderflow: false,
  rangeOverflow: false,
  stepMismatch: false,
  badInput: false,
  customError: false
}

https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

https://udn.realityripple.com/docs/Web/API/HTMLObjectElement/setCustomValidity

Demo

https://codepen.io/memetican/pen/LYBrgqQ/9632bd83545b8fdf722b1b8b55e377f7?editors=1010

Triggering Validation without Submit

https://stackoverflow.com/a/21458090

Additional References

https://angelika.me/2020/02/01/custom-error-messages-for-html5-form-validation/

https://documentation.unbounce.com/hc/en-us/articles/360001198903-Modifying-Form-Validation-Error-Messages-in-the-Classic-Builder

https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message

‍