forms
Forms
You can still use a Roseworx form element without the [rwx-form] attribute and it will look the same, just without the Roseworx functionality.
Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwx.forms.scanDOM().
Description
Roseworx forms handles all the validation and submission of your forms. When you unfocus form a form field, a validation algorithm is ran on the value of that field to determine if it is "valid" or not - taking into account if the field is required or not. The submit button inside the form will be disabled until all the form fields are considered valid. When a field is not valid, Roseworx will expose a provided invalid message to the user and add invalid styles to the element. When a field is valid, valid styles get added to the element.
Usage
- Copy the html code and personalise it to your use case.
- form functionality comes with the core files when you import rwx from 'roseworx' so you dont need to do anything extra. Any element with the rwx-form attribute and that follows the correct html structure will automatically have functionality implemented.
- To customise the appearance of the form change these SCSS Variables.
Additional Methods
In order to use the additional methods, a unique id attribute must be present on the [rwx-form] element you are targeting. These must only be called on or after the window load event.
void
(
ID Of Form Element: String
Custom Submit Function: Function
)
By default, once the submit button is pressed on a form, the data will be submitted normally to the url specified in the action attribute on the rwx-form node. However, this method allows you to provide an overiding function for any form. The custom function supplied will be called when the form is submitted with a parameter of type Object with key value pairs for each necessary field in the format of {fieldname: value}.
rwx.forms.customSubmitFn('idOfForm', (values)=>{
console.log(values);
});
Validation rules
If a .rwx-form-item has a .required class the validation rules are the following;
- An input with type="email" needs a valid email in the format xx@xx.xx.xx
- A Checkbox / Toggle / Radio Group needs to be checked
- A Select box needs to have an option selected which is a value other than "". (If an option node has value="" and it gets selected, the field is considered invalid. This can be useful for placeholder options.)
- All other input types and textareas need a value with length > 0.
If an input does not have the .required class it is considered valid.
Useful Info
If you have specified a node with class .invalid-message inside the .rwx-form-item, this will only get displayed when the field is invalid, and removed when it is valid.
The validity of a field is determined when the field loses the browser focus (e.g you click away from the field or tab to another field).
A rwx-form element needs at least 1 button with type="submit" inside it. This button will be disabled and remain disabled untill ALL fields in the form are considered valid.