Form

Docs & Examples

• winduum

Source

• Form.js

Stimulus Actions

validateForm

Validates form via validateForm method. The action data-action="submit->x-form#validateForm" and novalidate is added automatically on form upon controller connect. You can add any params from options via Action params.

Example

<form class="x-form grid grid-cols-12 gap-4" data-controller="x-form">
    <div class="x-field col-span-4">
        <label class="x-label" for="given-name">First name</label>
        <div class="x-control">
            <input id="given-name" name="given-name" autocomplete="given-name" required>
        </div>
    </div>
    <div class="x-field col-span-4">
        <label class="x-label" for="family-name">Last name</label>
        <div class="x-control">
            <input id="family-name" name="family-name" autocomplete="family-name" required>
        </div>
    </div>
    <div class="x-field col-span-4">
        <label class="x-label" for="email">Email</label>
        <div class="x-control">
            <input type="email" id="email" name="email" autocomplete="email" required>
        </div>
    </div>
    <div class="x-field col-span-4 items-start">
        <button class="x-button" type="submit">Submit</button>
    </div>
</form>

validateField

Manually validates field via validateField method. This method is executed on each validation selector upon execution of validateForm method automatically. You can add any params from options via Action params.

<form class="x-form" data-controller="x-form">
    <div class="x-field">
        <label class="x-label" for="given-name">First name</label>
        <div class="x-control" data-action="change->x-form#validateField">
            <input id="given-name" name="given-name" autocomplete="given-name" required>
        </div>
    </div>
</form>