Form submition and validation

[Nick22ll]

Hi, maybe I miss something but I followed the docs about validation and my form is not submitting.
This is my code:

HTML

<form
action="update_username"
method="POST"
data-te-validation-init
data-te-active-validation="true"
autocomplete="off"
>
<div class="relative"
data-te-validate="input"
data-te-validation-ruleset="isRequired|isLongerThan(2)|isShorterThan(25)">
<label
for="username-input">
Choose your new username
</label>
<input
name="name"
id="username-input"
type="text">
</div>
<div class="flex items-center">
<button
type="button"
id="username-submit-button"
data-te-ripple-init
data-te-ripple-color="light"
data-te-submit-btn-ref
>
Change Username
</button>
</div>
</form>

JS

import {
Validation,
Input,
initTE,
} from "tw-elements";

initTE({ Validation, Input }, true);

With data-te-submit-btn-ref on the button "you don't have to listen on the button clicks yourself", this means also that I must give a submit callback function? If yes how?

Thanks

[juujisai]

Hi!

You can use the submitCallback option where you can pass a method that is beeing called after the validation is performed. Checkout this example to see how it works:
https://tailwind-elements.com/docs/standard/forms/validation/#custom-validation

Read about the submitCallback option on our API section:
https://tailwind-elements.com/docs/standard/forms/validation/#docsTabsAPI - section options

You can also listen for our events that are emitted after validating components:
https://tailwind-elements.com/docs/standard/forms/validation/#docsTabsAPI - section events

[Nick22ll]

Thank you very much!
I hadn't noticed the button for switching to the API documentation... 🤦‍♂️