Tornado Logo

Validation - Tornado UI v2

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

Javascript Validation

the global validation mechanism 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 for the user and that works simply by adding attribute required or class name required to the input control you can test it by submit the form below 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>

Success Redirect

if you want to redirect to a success or thanks page after validation is done and the form data sent you can do it with two seperate ways you can do it by adding an attribute to the form tag called data-success=”Your Page URL” and you can set a timeout before Redirect by adding attribute data-timeout=”1000″ and a value by millisecond default timeout is 500 millisecond.

the other way if your some how cant add data attributes to your form you can do it simply by adding a hidden input with name success-redirect and adding the url as a value for that input and the timeout data attribute works just fine in the input you can see usage example below.

<!-- Redirect With Data Attributes -->
<form class="form-ui" data-success="http://success.com" data-timeout="1000">...</form>

<!-- Redirect With Input -->
<form class="form-ui">
    <input type="hidden" name="success-redirect" value="http://success.com" data-timeout="1000" />
</form>

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 ux experince 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

an example of the control status message with success color

error control status message with badge..
<!-- 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>

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