README
Orange Forms JS
Make form validation easy.
Requirements
This package is thinking to use with webpack.
Dependencies
custom-filters-js
lit-element
Check package.json for more information.
Installation
npm i orange-forms-js
Usage
In your main .js add orange-forms.js
import 'orange-forms';
And in your form add the class orange-form
<form name="my_form" class="orange-form">...</form>
Your form needs a name.
The orange-forms automatically add to your form a class called OrangeForm, check the documentation below. If you require the class associated with the form you can get it using globalThis['orangeForms'], for example:
console.log(globalThis['orangeForms']['my_form']);
The orange-forms.js file will also automatically import the files:
./css/styles.css
Loads the styles that Orange form needs.
./components/ff-notices-cpt.js
Loads a component related to notifications from a field or a form. Check the documentation for components here
./components/field-cpt.js
Loads a component that add a label, an input and the component ff-notices-cpt. Check the documentation for components here
./orange-form
Loads the class that validate and process the data of inputs.
Class OrangeForm
This class validates the fields that contain the field attribute of a form, obtains their values and sends them as a JSON to the url specified in the action attribute of the form. The JSON is sent via fetch.
A JSON response is expected from the url of the action attribute of the form.
Properties
fields
Returns the fields that contain the field attribute in the form.
data
Returns the values of the fields as a JSON.
redirectSuccess
Returns the url where the site should go if the JSON response success is true.
redirectError
Returns the url where the site should go if the JSON response success is false.
reset
Get or set if the form will to reset when submit is complete and if the JSON response success is true.
Filters
You can use filters in Orange Forms.
To add a filter you can use:
globalThis['orangeForms']['my_form'].addFilterListener('filter_name', function(p1, p2, ...){
console.log(p1, p2, ...);
return p1;
});
The available filters are:
fields
globalThis['orangeForms']['my_form'].addFilterListener('fields', function (fields) {
console.log(fields);
return fields;
});
isValid
globalThis['orangeForms']['my_form'].addFilterListener('isValid', function (isValid, fields) {
console.log(isvalid, fields);
return isvalid;
});
data
globalThis['orangeForms']['my_form'].addFilterListener('data', function (data, fields) {
console.log(data, fields);
return data;
});
sendOpts
You can change the fetch header options. Find "fetch header javascript" in your favorite search engine if you want more documentation.
globalThis['orangeForms']['my_form'].addFilterListener('sendOpts', function (fetchHeader, data) {
console.log(fetchHeader, data);
return fetchHeader;
});
Methods
constructor
Require a html form.
isValid
Returns true or false if the fields have a valid value.
fieldsNoticesReset
Reset field notifications.
send
Send the values of the fields in JSON to the url of the name attribute of the form. It expects a JSON response with the following structure:
{
"success": false,
"notice": "There was an error, check fields.",
"fields": {
"field_email": [
"Your email is not correct",
"Your email does not a correct format."
],
"field_date": "The date is not correct."
}
}
Where:
success returns if the query was correct true or false if an error occurred.
notice returns a message related to the query response.
fields returns an individual message or messages related to the field.
Events
Any event available in the html forms is available in Orange Form.
globalThis['orangeForms']['my_form'].addEventListener('event_name', function (e) {});
Additionally, the following events can be used:
beforeValid
This event is called before checking if the fields are valid.
beforeSend
This event is called before sending the JSON with the values of the fields.
afterSend(e)
This event is called after receiving the response from the server.
In e.detail you can get the data returned by the server, check method send to know the structure of the JSON that is expected to be received.
Notices
The file form-notices.js has the messages used in the form, as 'Please, check notices in fields.', if you want to translate or change these texts you can use a script tag:
<script id="orange-forms-form-notices" type="application/json">
{ "checkFields": "Please, check fields." }
</script>
Individually, the texts can be changed directly in the form using the notices attribute, for example:
<form
name="my_form"
notices='{ "checkFields": "Please, check fields." }'
></form>
Or you can change directly using javascript:
globalThis['orangeForms'][iterator.name].notices.checkFields =
'Please, check fields.';