API

<inform-el>

Attributes

• error-disable-submit (boolean, true if present): Set this in order to automatically disable the submit button while any of the <inform-field> shows an error.
• reset-on-submit (boolean, true if present): Set this in order to automatically reset the form after submit.
• default-submit (boolean, true if present): Required when using Remix's <Form/> compopnent. See usage in Remix docs.

The attributes below are automatically set:

• submitting (boolean, true if present): Set while the form is sending an AJAX request (based on the <form> action and method attributes). Can be used to show a loading state.
• invalid (boolean, true if present): Set while the form invalid.
• dirty (boolean, true if present): Set while the form dirty.

action and method are native forms attribute but must be specified on the <form> element, if applicable.

Events

event	content of detail field	description
informel-ready	none	The component has been initialized and is ready to be used. Wait for this event before calling any method.
inform-input	values the form values changedField the name of the field that changed	See input event
inform-change	values the form values changedField the name of the field that changed	See change event
inform-submit	values the form values submitter the DOM element that triggered the submit (like the submit button), or null if the submit was triggered programmatically.  Not supported in Safari before version 15.4	See submit event
request-start	values the form values	The form AJAX request (based on action and method form attributes) has started. Can be used to display a loading state.
request-end	values the form values	The form AJAX request (based on action and method form attributes) has ended. Can be used to hide the loading state.
request-success	values the form values response the json response status the http status	The form AJAX request has succeeded (status 2XX)
request-error	values the form values response the json response status the http status error the exception if there was one	The form AJAX request has failed (status != 2XX) or there was an exception

All the native events also bubble up to <inform-el>.

Methods

requestSubmit()

Try to submit the form, if valid. Equivalent to clicking on a submit button.

reset(newValues?)

Resets the form. If newValues is provided the form will be reset to the provided values. If no newValues are provided, the form will reset to the last reset value or to the initial values.

The dirty and invalid and touched states are also reset.

setValues(newValues)

Sets form values, without resetting.

Properties

The submitting, dirty and invalid attributes mentioned above are also exposed as properties.

validationHandler

Function that receives the current form values and returns the errors in the format:

{
    fieldName: 'Error description';
}

Example:

document.querySelector('inform-el').validationHandler = ({ values }) => ({
    password_repeat: values.password !== values.password_repeat ? 'Passwords must match!' : '',
});

The above will display the "Passwords must match!" error next to the password_repeat field if it's not identical to the password field.

zodSchema

Receives a zod schema. Example:

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" }),
    }),
});

submitTransform

Function called before submit. It receives the form values and returns the transformed data to send to the backend.

Example:

document.querySelector('inform-el').submitTransform = (values) => ({
    ...values,
    fullName: values.firstName + ' ' + values.lastName,
});

<inform-field>

Attributes

• submit-on-change (boolean, true if present): If present, the form will be submitted whenever this field has changed (as part the change event)
• touched-on-input (boolean, true if present): If present, the field will be set to touched (and validation errors shown) on the first keystroke (input event). If not present (default), the field is set to touched on blue (change event).
• name (string): The name of the field, when using a custom form control. Use the field only in that case. Otherwise set the name attribute on the form control (like <input /> or <select />).
• default-error (string): Error message to display when this field is in error, regardless of the error.
• bad-input (string): Error message to display when this field ValidityState is badInput.
• pattern-mismatch (string): Error message to display when this field ValidityState is patternMismatch.
• range-overflow (string): Error message to display when this field ValidityState is rangeOverflow.
• range-underflow (string): Error message to display when this field ValidityState is rangeUnderflow.
• step-mismatch (string): Error message to display when this field ValidityState is stepMismatch.
• too-long (string): Error message to display when this field ValidityState is tooLong.
• too-short (string): Error message to display when this field ValidityState is tooShort.
• type-mismatch (string): Error message to display when this field ValidityState is typeMismatch.
• value-missing (string): Error message to display when this field ValidityState is valueMissing.

The attributes below are automatically set:

• touched (boolean, true if present): If present, this field has been "touched" (blurred at least once), or a submission attempt has been made.
• error (boolean, true if present): If present, this field is invalid and the error is displayed (error is only displayed when the field has been touched).