Forms
Send forms using ajax
Specify data-ajax to send forms in ajax. Notice how the send button is disabled while sending. File uploads work
and canvas elements work just fine as well. Configuration can be passed directly inside data-ajax.
Some shortcuts as direct data attributes are supported.
Ajax forms expect either:
- an html response: that will be shown in the
data-ajax-targetelement. - a json response: with a message key that will be shown in the
data-ajax-targetelement.
You can also set a data-ajax-handler function that will be called (check the logs!).
Specify data-ajax-remove to remove right after sending.
Specify data-ajax-reset to reset fields after sending (to their initial values). Targets status window.
Specify data-ajax-clear to clear fields after sending (even if they had initial values).
Form validation
Form validation made easy. Add data-validate to override native html validation with custom messages and layout.
Use built in html 5 validators like required, minlength & maxlength, min and max, type, pattern or any of the custom ones in
data-validate-xxx.
- same
- number
- digits
- alnum
Set a custom message with data-validate-message on the form that will be seen as ephemeral text in a div matching data-status key.
To show validation message, use css to show/hide validation message as needed.
You can also use tooltips on fields with data-validate-tooltip. Otherwise, works as a regular tooltip.
Notice how validation happen on blur if invalid.
Server side based validation, expect a 200/400 combo or a json response.
Check how action name or formaction attributes are handled properly, even when navigating back from the results
page.