Skip to main content

Validation rules & error messages

Custom validation rules​

informel uses the browser built-in form validation by default, with attributes such as required, minlength, pattern, type="email", type="url" etc...

Here is an example (try submitting the form):



On top of that, it is possible to specify custom validation rules, via the `validationHandler` property:
document.querySelector('inform-el').validationHandler = ({ values }) => {
    // Returns an object {'field name': 'error message'}
};

Custom error message​

When a field is in error, the control's validationMessage is shown by default.

For example, on Google Chrome, <input type="text" required /> will show Please fill out this field. while <input type="checkbox" required /> will show Please check this box if you want to proceed..

To customize this behavior, you can either use validationHandler as shown above, or use the following attributes on <inform-field />:

  • default-error: a fixed error message displayed whenever the field is in error (regardless of the reason).
  • For each property in the native ValidityState object, <inform-field /> accepts a corresponding kebab-case attribute to specify the error message. For example, if the field is <input type="email" required /> and you want to show different errors when the value is not set or when the value doesn't have the right format, you can use the value-missing and the type-mismatch attributes. See them in action here:

When multiple errors are specified, the order of precedence is:

  1. Error returned by validationHandler
  2. <inform-field /> ValidityState attribute
  3. <inform-field /> "default-error" attribute
  4. The element native validationMessage.

Using zod for validation​

A zod schema can be specified via the zodSchema property:

document.querySelector('inform-el').zodSchema = z.object({
    first_name: z.string().min(1, { message: "Firstname is required" }),
    last_name: z.string().min(1, { message: "Lastname is required" }),
    email: z.string().min(1, { message: "Email is required" }).email({
        message: "Must be a valid email",
    }),
    password: z
        .string()
        .min(6, { message: "Password must be atleast 6 characters" }),
    terms: z.literal(true, {
        errorMap: () => ({ message: "You must accept Terms and Conditions" }),
    }),
});

Just like other validation methods, if the form values are incompatible with the schema, errors are shown and submission is blocked.

Disabling the submit button on error​

When adding the error-disable-submit attribute on <inform-el />, the submit button is automatically disabled while errors are shown: