Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Forms Methods - Tornado UI

Tornado JS/Typescript Forms Methods to Activate or Create the Form Controls Components.

Forms Methods

tornado provide an Object called Forms that has a useful methods and properties that u can use to create and minpluate 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.

//====> Create Advanced Select <====//
Forms.advancedSelect('.select-tag');
//===> Accepts CSS Selector and Objects

Advanced Uploader

Tornado Forms has another file uploader method called advancedUploader that you can use to activate the functionality of Tornado UI Advanced File Uploader Form Control Component.

//====> Activate Advanced Uploader <====//
Forms.advancedUploader('.advanced-uploader input[type="file"]');
//===> Accepts CSS Selector and Objects

Form Repeater

Tornado Forms has an element repeater method called repeater that you can use to activate the functionality of Tornado UI Form Repeater Component.

//====> Activate Form Repeater <====//
Forms.repeater('.form-repeater');
//===> Accepts CSS Selector and Objects

Rating Control

Tornado Forms provide a method called rating that you can use to activate the functionality of Tornado UI Rating Control Component.

//====> Activate Form Rating Control <====//
Forms.rating('.rating-control');
//===> Accepts CSS Selector and Objects

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.