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
[email protected]	true
[email protected]	true
[email protected]	true
[email protected]	false
[email protected]	false
[email protected]	false
[email protected]	true
[email protected]	true
[email protected]	true
[email protected]	false
[email protected]	false
[email protected]	false
[email protected]	true
[email protected]	true
[email protected]	false
[email protected]	true
[email protected]	false
[email protected]	false
[email protected]	false
[email protected]	false
[email protected]	false
[email protected]	false
controlchecker@@flt.id	false
controlchecker1@[email protected]	false
[email protected]	false
[email protected]	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

Check Data To Server

HTML

In html area add data atribute withname data-table with value table name who will be using for checking

<input type="email" class="check" name="email" minlength="6" maxlength="50 data-table="users">"

JS

$('.check').controlChecker({ ajax: { url: 'example.com', // url for check the data type: 'post' } });

Server Side Checking

In this example will use PHP and must return a json object with key name is "exists" and the return value is boolean (true or false). So if in the database have same value as user new input value, the return is true that mean the input value are not available (exists = true) else return (exists = false) that mean input are available. NB: remember field are name in input atribute, and table are from data-table atribut who has give in html code. return format allowed are json only with key name exists and boolean return value.

`<?php if (isset($_POST['field']) && isset($_POST['table']) && isset($_POST['value'])) {

// $field = strtolower(trim($_POST['field'])); // $value = strtolower(trim($_POST['value'])); // $table = strtolower(trim($_POST['table'])); // $output = ['exists' => false]; // json format key exists and give false value before checking

// your query like "SELECT COUNT(*) as c_data FROM " . {$table} . " WHERE " . {$field} . " = " . {$value}. ";

// bla bla bla until result of your query lets store in variable called $rest

// example $rest = DB::getInstance()->get('COUNT(*) c_data', $table, array($field, '=', $value))->result();

$output['exists'] = $rest->c_data ? true : false;
echo json_encode($output);
return false;

}`

Chained Checking

What it is mean? Chained Checking is for check data but will be check to others field too. For example we need some informations about users bank accound id. In normally case a user bank account have unique number but that only happen in the same bank, how about others bank? There a posibility a user have same account number but the bank is difference. So chakned checking will use for that purpose.

HTML

First input is bank id

<input type="text" name="bank_code" class="check" data-table="banks" id="bank_code">

Seccond input is bank account

<input type="text" name="bank_account" class="check" data-table="users" id="bank_account">

JS

$('.check').controlChecker({ ajax: { url: 'example.com', // url for check the data type: 'post' }, chained: { enabled: true, id: 'bank_code', // input bank code id activeOnId: 'bank_account' // input bank account id } });

Server Side Checking

`<?php if (isset($_POST['field']) && isset($_POST['table']) && isset($_POST['value']) && isset($_POST['prevColumnName']) && isset($_POST['prevColumnValue'])) { $field = strtolower(trim($_POST['field'])); $value = strtolower(trim($_POST['value'])); $table = strtolower(trim($_POST['table'])); $chainedField = strtolower(trim($_POST['prevColumnName'])); // chained field name $chainedValue = strtolower(trim($_POST['prevColumnValue'])); // chained field value $output = ['exists' => false]; // json format key exists and give false value before checking

// your query like "SELECT COUNT(*) as c_data FROM " . {$table} . " WHERE " . {$field} . " = " . {$value}. " AND " . {$chainedField} . " = " . {$chainedValue}";

$output['exists'] = $rest->c_data ? true : false;
echo json_encode($output);
return false;

}`

Updated Doc 4/9/2018. Other Doc On Progress