VALIDATION

tornado ui provide nice and simple validation responses theme for form controls and a global required mechanism before submit any form.

CONTROL VALIDATION

the validation method works automatically to validate the required controls if it has empty value or the value has undefined/Null value to show a Realtime error message and you can Implement the method on your control with Typescript or JS like the code below.

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

//======> Get Control Element <======//
var formControl = Tornado.getElement('#control');

//======> When Writing inside the Control <=======//
formControl.addEventListener('keyup', element => {
    //===> Aplly Validation <===//
    Forms.validate(element);

    //===> Or With Global Tornado Object <===//
    Tornado.forms.validate(element);
});

REQUIRED VALIDATION

you can apply validation by adding attribute required or class name required to the input control you can test it by submit the form below or focus and blur on some input and you can disable the validation by adding class name no-vali to the form tag.

<form class="form-ui row">
    <!-- Text Input -->
    <div class="col-12 col-m-6 col-xl-4">
        <label>Text Type Label</label>
        <input type="text" placeholder="Text Type Example" required>
    </div>
    <!-- Text Input -->
    <div class="col-12 col-m-6 col-xl-4">
        <label>Email Type Label</label>
        <input type="email" placeholder="Email Type Example" class="required">
    </div>
    <!-- Text Input -->
    <div class="col-12 col-xl-8">
        <input type="submit" class="btn primary" value="Submit Now">
    </div>
</form>

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

VALIDATION STATUS THEMES

in order to apply validation events theme on the controls you can do that by adding class to the form control and also to label elements a class of the event name and what we have here is 4 status success, error, warning, disable watch the example below.

<!-- Success Status -->
<label class="success">Success Status Label</label>
<input type="text" placeholder="Success Example" class="success">

<!-- Warning Status -->
<label class="warning">Warning Status Label</label>
<input type="email" placeholder="Warning Example" class="warning">

<!-- Error Status -->
<label class="error">Error Status Label</label>
<input type="password" placeholder="Error Example" class="error">

<!-- Disable Status -->
<label class="disable">Disable Status Label</label>
<input type="password" placeholder="Disable Example" class="disable" disabled>

VALIDATION STATUS MESSAGES

in order to give a good User Experience there is many ways to show the controls status messages number one is under the control messages and you can do that simply create a new html tag after the control element and give it the class control-hint and number tow you can use the badges by create it after the control tag you will see those two examples in the code below and also you can use alerts components to do the same

<!-- Success Status -->
<label class="success">Success Status Label</label>
<input type="text" placeholder="Success Message Example" class="success">
<!-- Message Hint -->
<p class="control-hint success">an example of the control status message with success color</p>

<!-- Error Status -->
<label class="error">Error Status Label</label>
<input type="email" placeholder="Error Message Example" class="error">
<!-- Message Badge -->
<span class="badge danger outline dismiss pointing-top">control status message with badge.. <i class="ti-close remove-item"></i></span>