1.0.6 • Published 4 months ago
ds-forms v1.0.6
DSForm doc
Install
npm install ds-forms
Description
Script to process form and send request to server in very simple way.
Basic Field Structure
<div class="ds-form-field">
<input type="text">
</div>
Script require parent container to put state classes to container instead field itself.
OLD below
Set required fields like this
<input data-required="1"/>
Field with error
<input data-required="1" class="error"/>
Form states
<form class="loading">, <form class="done">
Error format form server
{
status : "error",
error_code : "requried", // Required, even if it does not fit error code ins.
message : "Error message"
}
Success
{
status : "success",
message : "Optional, will override js message"
}
Custom data send to server, which was not in form
// Use beforeSubmit
beforeSubmit = function() {
let inputs = get("inputs");
inputs.my_custom_field = "My custom field";
}
Optional div where all errors and success messages will appear
<div class="dsform_message"></div>
Init
let form = new DSForms("my_form_id", {});
{} related to settings, which are following:
All settings are optional
submitUrl
by default it takes form's action attribute.
{submitUrl : "/"}
auto
script can detect required fields, password fields and check them. Also it can handle errors. Read about later below. By default it is true.
{auto : false}
doNotLock
script can detect required fields, password fields and check them. Also it can handle errors. Read about later below. By default it is true.
{doNotLock : true}
beforeSubmit
{beforeSubmit : function() {
return true; // To continue form submit
// return false; to break submit
}
afterSubmit
{afterSubmit : function(rsp) {
// rsp - server response
return true; // everyting is ok
// return false; stop automatic reaction to form submit
}
requestHeaders
{
requestHeaders: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
messages
{
messages: {
"many_errors" : "You did not fill few required fields properly.",
"password_confirmation" : "Please confirm password by repeating it in second password field",
"email_validation" : "Email format is invald",
"success" : "Form was submitted"
}
}