FORMS METHODS

tornado provide an Object called Forms that has a useful methods and properties that u can use to create and miniplate the Form Controls you can import it as JS/TS Module then you can use those methods like this Forms.method(…). or you can use it from the global object like this Tornado.forms.method(..);

//======> Import Forms Methods <=======//
import Forms from './Base/Forms';

//======> Typescript Usage <=======//
Forms.method(...);

//======> Global Usage <=======//
Tornado.forms.method(...);

PLACEHOLDER EFFECT

one of the method in Tornado Forms is placeholder witch allow you to apply an effect when focus on form control the placeholder disappear and when you lose focus if the control still empty it shows again.

//====> get the Control <====//
var formControl = Tornado.getElement('#control_id');

//======> Placeholder Effect <=======//
Forms.placeholder(formControl); 

//===> Accepts Element or Node Object

CONTROL VALIDATION

Tornado Forms has a simple required controls validation witch allow you to validate required form control is filled with a value or not and shows an error message or coloring it to success colors.

//====> get the Control <====//
var formControl = Tornado.getElement('#control_id');

//====> Control Validation <====//
Forms.validate(formControl); 

//===> Accepts Element or Node Object

FORM VALIDATION

another Validation method called formValidate but this one is for validate a complete form and send data real-time with fetch and if success you can redirect the user to another URL by adding link to attribute data-success or create input with name redirect and link as value.

//====> get the Control <====//
var form = Tornado.getElement('.form-ui');

//====> Form Validation <====//
Forms.formValidate(form);

//===> Accepts Element or Node Object

FILE UPLOADER

Tornado Forms provide a method called fileUploader that you can use to activate the functionality of Tornado UI Standard File Uploader Form Control Component.

//====> get the Control <====//
var formControl = Tornado.getElement('.file-input input');

//====> Activate File Uploader <====//
Forms.fileUploader(formControl);

//===> Accepts Element or Node Object

PROGRESS BAR

Tornado Forms provide a method called progress that you can use to create and activate the functionality of Tornado UI Progress Bar Component like this Tornado.forms.progress(selector, options);

//====> Activate Progress Bar <====//
Tornado.forms.progress('.progress-bar', {
    type  : 'bar'   //===> the Type of the Progress [bar || circle]
    color : '#000'  //===> the color of the Progress
});

ADVANCED SELECT

Tornado Forms provide a method called advancedSelect that allow you to create an Advanced Select component out of normal select control.