controlChecker
Form Control, Checker & Validation Input Plugins
Getting Started
controlChecker is plugins that you can use for checking data to server, controling input form with Smart Grouping and prevent clicking submit when a form did'nt all clear from error/warning/danger state, and it has awsome validation input types, specially for email.
How To Use
- Load css & js file
- Init plugins
Example
HTML
<input type="text" class="check">
JS
$('.check').controlChecker();
By default it will check if input value and lenght of value. If input value is empty then it will invok empty state and if lenght value is < 1 or less then minlength attribut then invok the error state.
Minlength and Maxlength atribut
<input type="text" class="check" minlength="6" maxlength="6">
By default it will read minleght and maxlength for example you need input for pin number but number only will allowed. So add a class digit
<input type="text" class="check digit" minlength="6" maxlength="6">
Another class
Class Name | Description | Input State | Output |
---|---|---|---|
textlowercase | Change text to lower case | LOWER TEXT | lower text |
textuppercase | Change text to upper case | upper teXt | UPPER TEXT |
textcapitalcase | Change text to init case | init TEXT | Init Text |
Email Validation
<input type="email" class="check">
or <input type="text" name="your_email" class="check">
or <input type="text" name="abc" data-type="email" class="check">
Email validation has 3 ways to use it. First using a type email
,the second way is using a name attribut which contains email
and the last is using data atribut data-type="email"
.
Allowed Charakter | Allowed Email Format |
---|---|
[alphabet], [numeric], [at], [dot], [underscore], [hyphen] | Google & Yahoo Format |
Input | Result |
controlchecker@flt.id | true |
controlchecker@gm.id | true |
controlchecker@flt.co.jp | true |
controlchecker@flt.i | false |
controlchecker@flt.i2 | false |
controlchecker@flt.co.jp.kr | false |
controlchecker1@flt.id | true |
1controlchecker@flt.id | true |
control.checker@flt.id | true |
new.control-checker@flt.id | false |
-controlchecker1@flt.id | false |
_controlchecker1@flt.id | false |
control_checker1@flt.id | true |
control-checker1@flt.id | true |
control-c@flt.id | false |
control-ck@flt.id | true |
control_@flt.id | false |
control_checker_validator@flt.id | false |
control-checker-validator@flt.id | false |
control_checker-@flt.id | false |
control__checker@flt.id | false |
control--checker@flt.id | false |
controlchecker@@flt.id | false |
controlchecker1@flt@co.id | false |
controlchecker@f.id | false |
c@flt.id | false |
Options
Option Name | Option Rule | Option Value | Default | Description |
---|---|---|---|---|
modal | enabled | true or false | true | Set plugin active even inside modal |
id | String | myModal | Set id modal | |
cssFramework | No Rule | Boostrap or SUI | Boostrap | Set supported smart grouping in css framework |
formId | String | null | Set supported smart grouping in form with specified id. By default will support with all form if not reset this option | |
changes | class | String | has-changes | Set class when value is change |
showText | true or false | false | Set text condition will show or hide | |
text | String | Berganti | Text change value condition | |
success | class | String | has-success | Set class when return value is success after checking to server |
showText | true or false | true | Set text success will show or hide | |
text | String | Tersedia | Text success value condition | |
warning | class | String | has-warning | Set class when return value is not success after checking to server |
showText | true or false | true | Set text warning will show or hide | |
text | String | Sudah Terpakai | Text warning value condition | |
empty | class | String | has-empty | Set class when input field less then 1 charakter |
showText | true or false | true | Set text empty will show or hide | |
text | String | Tidak Boleh Kosong | Text empty value condition | |
error | class | String | has-error | Set class input length less then minlength attribut or more then maxlength attribut or ajax return error |
showText | true or false | true | Set text error will show or hide | |
text | String | Masih Kurang | Text success value condition | |
secondText | String | Karakter | Second text success value condition | |
match | class | String | has-unmatch | Set class when matching fields are not match |
showText | true or false | true | Set text unmatch will show or hide | |
unmatchText | String | Belum Sama | Text when unmatch return result | |
matchText | String | Text when matching return result | ||
matchThisId | String | null | Set match input id | |
matchToId | String | null | Set matching to input id | |
unsuit | class | String | has-unsuit | Set class when email input field format not allowed |
showText | true or false | true | Set text unsuit will show or hide | |
text | String | Tidak Boleh Kosong | Formatnya Belum Sesuai | |
parentClass | String | form-group | Set class for smart grouping | |
icon | enabled | true or false | true | Set icon class to show or hide |
position | before or after | before | Set icon position before or after text | |
success | String | fa fa-check | Success icon | |
warning | String | fa fa-bell-o | Warning icon | |
empty | String | fa fa-info | Empty icon | |
error | String | fa fa-info-circle | Error icon | |
unmatch | String | fa fa-exclamation-circle | Unmatch icon | |
unsuit | String | fa fa-exclamation | Unsuit icon | |
ajax | url | String | null | Set url for ajax (checking data to server) |
type | get or post | get | Set method transfer data for ajax (checking data to server) | |
errorText | String | Gagal Melakukan Ajax | Set output text when ajax return error | |
chained | enabled | true or false | false | Set enable ajax do checking with chained to other input field and send this (value and name) data to server for checking purpose with current input was invoked |
id | String | null | set a chained id input tag for checking data to server | |
activeOnId | String | null | Set tag input id who will trigger chained id for checking purpose | |
Option Name | Option Rule | Option Value | Default | Description |