Skip to main content

Submitting

informel relies on the <form /> being submitted. This happens when:

  • Clicking on the submit button (<button type="submit"></button> or <input type="submit" />).
  • Calling informel.requestSubmit()
  • Calling form.requestSubmit()
form.submit()

Calling form.submit() would also submit the form, but it would bypass all the checks performed by informel.

The submission stops if some fields are in error.

All fields become "touched" when attempting to submit the form and errors are displayed.

inform-submit event​

When the form is valid and the form is submitted, the inform-submit event is triggered and the form values are passed in the event detail field

document.querySelector('inform-el').addEventListener('inform-submit', ({ detail: { values, submitter } }) => {
    console.log('Successfully submitted!', values, submitter);
});

The event detail field also contains a submitter field which is the element that triggered the submission (or null if the submission was triggered through requestSubmit());

submitter support

submitter is not supported in Safari < 15.4 and will be null in that case.

This can be helpful for forms with multiple submit buttons:

<inform-el>
    <form>
        <inform-field>
            <input type="text" name="firstName" required />
        </inform-field>
        <button type="submit" name="a">Submit & do A</button>
        <button type="submit" name="b">Submit & do B</button>
    </form>
</inform-el>
document.querySelector('inform-el').addEventListener('inform-submit', ({ detail: { values, submitter } }) => {
    if (submitter?.name === 'a') {
        console.log('Submitted with A');
    } else if (submitter?.name === 'b') {
        console.log('Submitted with B');
    }
});

Sending AJAX request on submit​

If the action and method attributes are specified on the form, informel will automatically send the corresponding AJAX request on submit.

action and method are <form/> attributes, not <inform-el /> attributes!

See the example below:

Different events are emitted along the way:

  • request-start: The AJAX request has started. detail contains the following fields:
    • values: the form values.
  • request-success: The AJAX request has succeeded (status 2XX). detail contains the following fields:
    • values: the form values.
    • response: the json response.
    • status: the http status.
  • request-error: The AJAX request has returned an error (status != 2XX) or there was an exception. detail contains the following fields:
    • values: the form values.
    • response: the json response.
    • status: the http status
    • error: if there was an exception, the error.
  • request-end: The AJAX request has end, regardless of the result. detail contains the following fields:
    • values: the form values.

Sending files​

If any of the field is of type File, the is sent with header Content-Type multipart/form-data. Otherwise, the data is sent with header Content-Type application/json.

Transforming form values before submitting​

<inform-el> has a submitTransform() method called before submission, if implemented.

It receives the form values as parameter and must returns the parameters to send, as an object.

Example:

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

Restting the form after submission​

It is possible to automatically reset the form after submission by using the reset-on-submit attribute:

<inform-el reset-on-submit> ... </inform-el>

submit-on-change​

<inform-field /> supports submit-on-change field which will trigger form submission whenever the field has changed (received the change event).

For example:

<inform-el>
    <form action={`https://todo.test/api/task/${task.id}`} method="post">
        <inform-field submit-on-change>
            <input type="checkbox" name="done" />
        </inform-field>
    </form>
</inform-el>

The above sents a POST request to https://todo.test/api/task/${task.id} with body params {done: true|false} when the checkbox is toggled.