The form.css file provides styling for all form elements, including input, select, and textarea. Additionally, form.js simplifies form handling by enabling seamless form submission and providing customizable hooks for enhanced functionality.
By default, Layx styles form elements such as input, select, and textarea. To disable the default styling for specific elements, add the .default class. The form.js script also intercepts form submissions, preventing page reloads and sending data via POST. To opt out of this behavior for a specific form, use the .no-handle class.
No additional setup is required; simply include the form.css and form.js files in your project to enable automatic styling and handling.
onSuccess, onError, and beforeSubmit callbacks.fetch API for a smooth user experience.?form=[form.name] query parameter to the form's action URL, enabling precise server-side identification.Here is a basic example of a form styled and handled by Layx:
<form>
<label for="email">Email</label>
<input type="email" name="email" placeholder="Email">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Sign in">
</form>
Here are some useful details about form elements:
--padding-x, --padding-y, --radius,
--valid-color, --invalid-color, and --form-bg-color.
.wide class to form elements to make them wider, increasing their horizontal padding..r class to make form elements fully rounded.Client-side form validation provides real-time feedback to users. Layx utilizes CSS for seamless validation of form elements.
.validate class to input fields to enable real-time validation. This provides both valid and invalid feedback by default. To limit feedback to valid inputs, add the .valid class; for invalid inputs, use the .invalid class..validate-wrapper class. Use the valid and invalid attributes to display text-based feedback to users. These attributes can be used individually or together for more detailed validation messages.Additional examples of form elements styled and supported by Layx:
The form.js script accepts the following options:
onSuccess (function): Callback executed after a successful submission.onError (function): Callback executed upon submission failure.beforeSubmit (function): Hook to modify form data before submission.headers (object): Custom headers for the AJAX request.The form.js script provides the following methods:
handleFormSubmission(form): Attaches submission handling to a specified form.submitFormData(formData, formUrl, formName): Submits form data via AJAX and returns a promise.defaultOnSuccess(response, form): Default success callback (overridable).defaultOnError(error, form): Default error callback (overridable).defaultBeforeSubmit(formData, formUrl, formName, form): Default before-submit hook (overridable).name attribute for proper identification..no-handle class.onSuccess and onError callbacks for better user feedback.X-Requested-With header to submission requests, which can be leveraged in service workers.