tFormer

About




The tFormer plugin allows you to easily and unobtrusively control your HTML forms.

The main task of it is powerful HTML form validation and control.

Intuitive validation rules. User friendly control of error/success reports, submit, and other form processes..

HTML5 support: (more to come)

  • types: email, url, number;
  • attributes: required, max, min;


Developed by @TjRus

Special thanks to:

Contributors:

Installation & usage

1. Download source:

Production version (minified) or Developers version

Or clone it from GitHub repo:

git clone https://github.com/TjRus/tFormer.js.git
2. Add sources to your page:
<script src="tFormer.min.js"></script>
3. Define new tFormer and it's rules for your form:
Example
Rules: alpha-numeric, 5 characters length
Rules: required, email
Validation timeout - 500
Controlled by tFormer
<form id="my_form_id">
	<input type="text" name="zip" />
	<input type="text" name="email" />
	<input type="submit" value="Submit" />
</form>
<script>
var my_form_id = new tFormer('my_form_id',{
	fields: {
		zip: 'a1 l=5', // define only rules
		email: { //defining rules and other options
			rules: '* @',
			timeout: 500
		}
	}
});
</script>

Rules can be defined in few ways:

  • As HTML field element data attribute;
  • With HTML5 attributes;
  • In options while defining tFormer for your form;
  • With set() method;

Options

errorClass {string} (default - 'error')
This className will be added to field classList if it fails validation.
Code:
customizing
disable
(click to see the code)
var my_form = tFormer('myForm_ID', {
	errorClass: 'form-error', // custom error class, global for this form
	fields: {
		some_field_name: {
			errorClass: 'form-error-local', // custom error class, local, for this form field only
		}
	}
});
var my_form = tFormer('myForm_ID', {
	errorClass: '', // will disable adding some classes on error ('', false, null, undefined)
});

disabledClass {string} (default - 'disabled')
This className be added to button in case of it's disabling (for submit button - in case of some form field fails validation).
Code:
customizing
disable
(click to see the code)
var my_form = tFormer('myForm_ID', {
	disabledClass: 'form-disabled', // custom disabled class, global for all form buttons
	buttons: {
		button_name: {
			disabledClass: 'form-disabled-local', // custom disabled class, local, for this button only
		}
	}
});
var my_form = tFormer('myForm_ID', {
	disabledClass: '', // will disable adding some classes for disabling ('', false, null, undefined)
});

processingClass {string} (default - 'processing')
This className will be added to button classList when it start processing (for submit button - chen it start submitting after successful form validation).
Code:
customizing
disable
(click to see the code)
var my_form = tFormer('myForm_ID', {
	processingClass: 'form-processing', // custom processing class, global for all form elements
	fields: {
		field_name: {
			processingClass: 'form-processing-local', // custom processing class, local, for this element only
		}
	}
});
var my_form = tFormer('myForm_ID', {
	processingClass: '', // will disable adding some classes for processing ('', false, null, undefined)
});

timeout {number} (default - 0)
Option defines the delay before validating field. If user makes blur from some field - that field will be automatically validated without waiting for timeout finish.
Code:
customizing
(click to see the code)
var my_form = tFormer('myForm_ID', {
	timeout: 500, // custom timeout value, global for all form elements
	fields: {
		field_name: {
			timeout: 666, // custom timeout value, local, for this element only
		}
	}
});

validateEvent {string} (default - 'input keyup')
Option defines field event for starting validation.
Code:
customizing
disabling
(click to see the code)
var my_form = tFormer('myForm_ID', {
	validateEvent: 'blur', // custom event for validation field, global for all form fields
	fields: {
		field_name: {
			validateEvent: 'keyup', // custom event for validation, local, for this element only
		}
	}
});
var my_form = tFormer('myForm_ID', {
	validateEvent: '', // disabling on-the-fly field validation ('', false, null, undefined)
});

submitButtonControl {boolean} (default - true)
Tell the plugin should it control submit button or not ("control" means adding/removing some classes while validation process).
Code:
customizing
(click to see the code)
var my_form = tFormer('myForm_ID', {
	submitButtonControl: false, // will disable adding classes to submit button
});

submitButton {HTML element || undefined} (default - undefined)
This options tell the plugin what element is a submit button.
If it's not defined and submitButtonControloptions is true, the plugin will find the first element with type="submit"and use it as the submit button.
Code:
customizing
(click to see the code)
var my_form = tFormer('myForm_ID', {
	submitButton: document.getElementById('some_other_button_ID'), // will use this button as a submit button
});

before {function}
Function will be executed just before each validation of the field.
thishere is current HTML field element.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	before: function(){ // global, will be executed before each field validation
		console.log( this ); // => HTML form field element
	},
	fields: {
		some_field_name: {
			before: function(){ // local, will be executed only before current field validation
				console.log( this ); // => HTML form field element
			}
		}
	}
});

onerror {function}
Function will be executed each time when field validation will return false.
thishere is current HTML field element.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	onerror: function(){ // global, will be executed for each field if it fails validation
		console.log( this ); // => HTML form field element
	},
	fields: {
		some_field_name: {
			onerror: function(){ // local, will be executed only for current field if it fails validation
				console.log( this ); // => HTML form field element
			}
		}
	}
});

onvalid {function}
Function will be executed each time when field validation will return true.
thishere is current HTML field element.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	onvalid: function(){ // global, will be executed for each field if it pass validation
		console.log( this ); // => HTML form field element
	},
	fields: {
		some_field_name: {
			onvalid: function(){ // local, will be executed only for current field if it pass validation
				console.log( this ); // => HTML form field element
			}
		}
	}
});

fields {object} (should be like - { field_name: {/*field_options*/}, ... })
Describes validation and control options for each field.
Fieldsproperties should be a list of objects, named exactly like form elements and contain all needed options.
Code:
example
(click to see the code)
<input type="email" name="field_email" value="" />

<script>
var my_form = tFormer('myForm_ID', {
	fields: {
		field_email: {
			// check-button options
		}
	}
});
</script>

buttons {object} (should be like - { check_field_name: {/*button_options*/}, ... })
Describes a few options for each button.
Buttonsproperties should be a list of objects, named exactly like form fields that your button should check (or 'submit' for submit button) and contain all needed options.
To create check-button you need just add data-check="field_name" attribute in button html code with a value equal to some form field name.
Code:
example
(click to see the code)
<input type="email" name="field_email" value="" />
<input type="button" value="Check" data-check="field_email" />

<script>
var my_form = tFormer('myForm_ID', {
	buttons: {
		field_email: {
			// check-button options
		}
	}
});
</script>



Available fields options:

Also errorClass, disabledClass, processingClass, timeout, validateEvent, onerror, onvalid

rules {string}
String with rules for validation.
Code:
example #1
example #2
(click to see the code)
var my_form = tFormer('myForm_ID', {
	fields: {
		some_field_name: {
			rules: '* @' // required email
		}
	}
});
var my_form = tFormer('myForm_ID', {
	fields: {
		some_field_name: '* @' // required email
	}
});

request {object}
Object with properties that describes AJAX request for validation: url, method, data, start, end
(!important) The response should be checked in end()function.
Code:
request object structure
(click to see the code)
var my_form = tFormer('myForm_ID', {
	fields: {
		some_field_name: {
			request: {
				url: '/api/url?get_params=values', // by default = window.location.href
				method: 'get', // 'get' or 'post', default - 'get'
				data: {}, // some other params that should be send,
				start: function(){
					// `this` here is HTML field element
				},
				end: function( result ) { // IMPORTANT function in which developer should decide is request result tells that field is valid or not
					return true; // return {boolean}
				}
			}
		}
	}
});

own {function}
Function where you can do your own validation. Context (this) here is HTML field element. As a result af validation it should return {boolean}.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	fields: {
		some_field_name: {
			own: function(){
				console.log(this); // => HTML form field element
				// your check goes here
				return true; // should return {boolean}, depends on your check
			}
		}
	}
});

Methods

init()
Initialize tFormer (add validate events, submit control and other stuff). Executed automatically on defining new tFormer object. Can reinitialize tFormer object after destroy().
Return: tFormer object.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID'); // init() here runs automatically
my_form.destroy(); // will destroy all tFormer functionality
my_form.init(); // will initialize tFormer again

destroy()
Destroy tFormer (remove field validations, events, classes, data-attributes and everything that tFormer creates for it's work).
Return: tFormer object.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
my_form.destroy(); // will destroy all tFormer functionality

drop()
Set all default options (classes, timeouts, validateEvent, etc...).
Return: tFormer object.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	errorClass: 'custom-error'
});
my_form.drop(); // now errorClass will be default - 'error'

validate( options )
Validate form: check all fields -> mark not valid fields, fire and run appropriate events and functions. If form is valid - it will be submitted.
options - object with validations options:
// available options
options = {
	highlight: false, // {boolean}, if false - field will be not highlighted with errorClass in case of failing validation
	fire_event: false, // {boolean}, if false - before, valid and error validation events won't be fired
};
// or
options = {
	silence: true // {boolean}, means both, highlight and fire_event to be false
};

Return: {boolean} - true or false, shows does form passes all validations or not.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
my_form.validate(); // => true || false

get( option_name )
Get option value.
Return: {string} - option_name value.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	timeout: 563
});
my_form.get('timeout'); // => 563

set( options_object )
Set new values to some options.
Return: tFormer object.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID', {
	timeout: 563
});
my_form.get('timeout'); // => 563
my_form.set({'timeout': 365}); // sets new value for 'timeout' option
my_form.get('timeout'); // => 365

submit( function )
Sets submit function instead of default HTML form submit.
Return: tFormer object.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
my_form.submit(function(){
	alert('Submit!'); // will be executed instead of default form submit
});

submitDisable()
Turn off the submit button. Will add 'disabledClass' to submit button.
Return: tFormer object.

submitEnable()
Turn on the submit button. Will remove 'disabledClass' from submit button.
Return: tFormer object.

lock()
Lock current form. Locked form can't be submitted even if all validations passed successfully. The submit button will be disabled until form will be unlocked (with unlock() method).
Return: tFormer object.

unlock()
Unlock current form.

field( field_name )
Returns tFormer field object (with it's own properties and methods, that described below).
Code:
example
(click to see the code)
<input type="text" name="email" required />
<script>
	var my_form = tFormer('myForm_ID');
	var email_field = my_form.field('email'); // now we can work just with email field

	// for example
	console.log(email_field.hasRules('@')); // => true
</script>

button( button_name )
Returns tFormer button object (with it's own properties and methods, that described below).
Note: submit button automatically receive name "submit".
Code:
example
(click to see the code)
<input type="text" name="email" required />
<input type="button" data-check="email" value="Check email" />
<input type="submit" value="Submit" />
<script>
	var my_form = tFormer('myForm_ID');
	var email_check_button = my_form.button('email'); // now we can work with email check button
	var submit_button = my_form.button('email'); // now we can work with submit button
	// for example
	console.log(submit_button.disable()); // will disable submit button
</script>

Field Methods:

tFormer field object called tField object

validate( options )
Validate field.
options - validate options (the same as in global validate method).
Return: tField object
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email');
email_field.validate(); // will validate the field

// or simply
my_form.field('email').validate();

setRules( rules )
Set new rules to some field. (Replace old one)
Return: tField object
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email');
email_field.setRules('* @'); // replace old rules with new one

// or simply
my_form.field('email').setRules('* @');

addRules( rules )
Add new rules to current existed / defined rules.
Return: tField object
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email').setRules('@');
email_field.addRules('*'); // add required rule. new rules string will be '* @'

hasRules( rules )
Check is field has some rules.
Return: {boolean} true or false
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email').setRules('@ l=[10,13]');
email_field.hasRules('*'); // => false
email_field.hasRules('@'); // => true
email_field.hasRules('@ l=10'); // => true (PS. yep, you can combine rules and that's awesome :))

delRule( rules )
Delete few rules from rules string.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email').setRules('@ l=[10,13]');
email_field.delRule('l=10'); // new rules string will be '@ l=13'
email_field.delRule('l=[10,13]'); // new rules string will be '@'

error( is_error )
Mark/Unmark field with errorClass.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email');
email_field.error( true ); // will add 'errorClass' to HTML field element
email_field.error( false ); // will remove 'errorClass' from HTML field element

hold( should_hold )
Mark/Unmark field with 'holded' attribute. Holded fields causes disabling of submit button (it will be enabled again after unholding).
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var email_field = my_form.field('email');
email_field.hold( true ); // will add 'data-holded' attribute to HTML field element
email_field.hold( false ); // will remove 'data-holded' attribute from HTML field element

Button Methods:

disable()
Add disabledClass to HTML button element.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var submit_button = my_form.field('submit');
submit_button.disable(); // will add 'disabledClass' to submit button

enable()
Remove disabledClass from HTML button element.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var submit_button = my_form.field('submit');
submit_button.enable(); // will remove 'disabledClass' from submit button

processing( make_processing )
Add/Remove processingClass to button.
Code:
example
(click to see the code)
var my_form = tFormer('myForm_ID');
var submit_button = my_form.field('submit');
submit_button.processing( true ); // will add 'processingClass' to submit button
submit_button.processing( false ); // will remove 'processingClass' from submit button

Events

tFormer:before
Fires just before each field validate function.

tFormer:error
Fires for each field that fail validation

tFormer:valid
Fires for each field that passes validation

Validator

_v_- is build in separate object that used by tFormerfor validating form elements values.

You can use it even without main tFormer plugin (detailed - _v_ demos).

Validation rules

All validation rules described here - _v_ API rules. They are easy to remember short strings, can be combined in one string and separated with space by default.

Examples

Login form:
Login ( >4 symbols):
Password:
Code:
HTML
CSS
JavaScript
(click to see the code)
input {
	position : relative;
	z-index  : 1;
}
input.error { border-color : #fc6869; }
input.ok { border-color : #98cd6d; }
td div { position : relative; padding : 1px; }
.result_block {
	position   : absolute;
	right      : 0;
	top        : 1px;
	width      : 25px;
	height     : 25px;
	text-align : center;
	opacity    : 0;
	z-index    : 0;
}
.result_block.ok { background : #98cd6d; }
.result_block.error { background : #fc6869; }
.result_block.ok:before,
.result_block.error:before {
	color       : #fff;
	width       : 100%;
	height      : 100%;
	line-height : 26px;
	text-align  : center;
	text-shadow : 0 1px 1px rgba(0, 0, 0, .6);
}
.result_block.ok:before { content : "\02714"; }
.result_block.error:before { content : "\2718"; }
.result_block.ok,
.result_block.error {
	opacity : 1;
	right   : -24px;
}
.result_block,
input.error,
input.ok {
	-webkit-transition : all .3s;
	-moz-transition    : all .3s;
	transition         : all .3s;
}
var login_example = new tFormer( 'login_example', {
	onerror: function () {
		$( this ).removeClass( 'ok' );
		$( this ).next( '.result_block' ).removeClass( 'ok' ).addClass( 'error' );
	},
	onvalid: function () {
		$( this ).addClass( 'ok' );
		$( this ).next( '.result_block' ).removeClass( 'error' ).addClass( 'ok' );
	} ).submit( function () {
		// rewriting default submit code
		alert('Your form passed all validations and submit core executed.');
		login_example.processing( false );
	} );
<form id="login_example">
	<table>
		<tr>
			<td>Login:</td>
			<td>
				<div>
					<input type="text" name="login" data-rules="* l>4" />
					<div class="result_block error"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>Password:</td>
			<td>
				<div>
					<input type="password" name="password" data-rules="*" />
					<div class="result_block ok"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="right">
				<input type="submit" value="Login" />
			</td>
		</tr>
	</table>
</form>



Visa card validation demo
All Visa card numbers start with a 4. New cards have 16 digits. Old cards have 13.

Payment details:
Visa
Card number
Expiration
CVC code
Code:
HTML
CSS
JavaScript
(click to see the code)
#visa_example {
	z-index  : 1;
	position : relative;
}
.card {
	background            : -webkit-linear-gradient(top, #14b2df, #0e7cca);
	background            : -moz-linear-gradient(top, #14b2df, #0e7cca);
	background            : linear-gradient(top, #14b2df, #0e7cca);
	-webkit-border-radius : 5px;
	-moz-border-radius    : 5px;
	border-radius         : 5px;
	-webkit-box-shadow    : 0 1px 3px rgba(0, 0, 0, .4), inset 0 0 1px 1px rgba(0, 0, 0, .1), inset 0 2px 1px rgba(255, 255, 255, .38), inset 0 1px 0px rgba(0, 0, 0, .2);
	-moz-box-shadow       : 0 1px 3px rgba(0, 0, 0, .4), inset 0 0 1px 1px rgba(0, 0, 0, .1), inset 0 2px 1px rgba(255, 255, 255, .38), inset 0 1px 0px rgba(0, 0, 0, .2);
	box-shadow            : 0 1px 3px rgba(0, 0, 0, .4), inset 0 0 1px 1px rgba(0, 0, 0, .1), inset 0 2px 1px rgba(255, 255, 255, .38), inset 0 1px 0px rgba(0, 0, 0, .2);
	padding               : 20px;
	width                 : 365px;
	height                : 220px;
	position              : relative;
}
.card::before,
.card::after {
	content               : '';
	height                : 100%;
	width                 : 15px;
	position              : absolute;
	display               : block;
	top                   : 0;
	right                 : 0;
	z-index               : -1;
	-webkit-border-radius : 5px;
	-moz-border-radius    : 5px;
	border-radius         : 5px;
	opacity               : 0;
}
.card::before { background : red; }
.card::after { background : green; }
.card.error::before,
.card.ok::after {
	right   : -6px;
	opacity : .5;
}
.card::after,
.card::before {
	-webkit-transition : all .2s;
	-moz-transition    : all .2s;
	transition         : all .2s;
}
.card-title,
.card-type {
	color       : #fff;
	font-size   : 15px;
	height      : 30px;
	line-height : 30px;
	font-weight : 600;
	text-shadow : 0 1px 1px rgba(0, 0, 0, .5);
}
.card-type {
	text-align : right;
	margin     : -30px 10px 0 0;
	font-size  : 30px;
}
.card-number,
.card-expiration,
.card-cvc {
	color          : #d7eaf1;
	text-transform : uppercase;
	font-size      : 13px;
	line-height    : 20px;
	height         : 20px;
	font-weight    : 600;
	margin-top     : 10px;
	margin-bottom  : 3px;
	text-shadow    : 0 -1px 0 rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .3);
	clear          : both;
}
.card-cvc {
	text-align : right;
	margin-top : -23px;
}
#visa_example input,
#visa_example select {
	border                : 1px #156f9b solid;
	-webkit-border-radius : 3px;
	-moz-border-radius    : 3px;
	border-radius         : 3px;
	-webkit-box-shadow    : inset 0 1px 2px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2);
	-moz-box-shadow       : inset 0 1px 2px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2);
	box-shadow            : inset 0 1px 2px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2);
	height                : 40px;
	padding               : 10px;
	line-height           : 20px;
	color                 : #7d7d7d;
	font-family           : Menlo, Lucida Console, Arial, serif;
}
#visa_example input.error,
#visa_example select.error {
	border             : 1px #b83d43 solid;
	-webkit-box-shadow : inset 0 0 0 1px #b83d43;
	-moz-box-shadow    : inset 0 0 0 1px #b83d43;
	box-shadow         : inset 0 0 0 1px #b83d43;
}
#visa_example .card select {
	margin-right : 15px;
	float        : left;
}
#visa_example select {
	-webkit-appearance  : none;
	-moz-appearance     : none;
	appearance          : none;
	background-repeat   : no-repeat;
	background-position : 100px center;
	background-image    : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANBJREFUeNpi+P//PwMMp6WlMSLz0TETAxSkp6crAqlnUBorgCvm5OSczcfHJwGkp+NVDDTNm4mJyRmIGYDYHcTHppgR6E4Obm7ue6ysrJIwwd+/fz/9+vWr8syZM3+iKAY6nB1I7wNiOSTx+0DsAsS/0BUzEAtAzgCZfBmIVZHEbwCxATZnsF28ePHssmXLdGCCUVFRl/T19U3RnQEKjV9AiRwNDY3vIAEtLa3vQH4uukIwgMXO06dPl7e2tv4B0otxxSAyRxqIj0NprIoBAgwAst6YrhX1J5sAAAAASUVORK5CYII=);
}
#visa_example input[name="card"] { width : 100%; }
#visa_example select[name="month"] { width : 120px; }
#visa_example select[name="year"] {
	width               : 80px;
	background-position : 60px center;
}
#visa_example input[name="cvc"] {
	width        : 80px;
	float        : right;
	margin-right : 0;
}
#visa_example input[type="submit"] { margin : 10px; color: #fff; }
var visa_example = tFormer( 'visa_example', {
		onerror: function (){
			$( '#visa_example .card' ).removeClass( 'ok' ).addClass( 'error' );
		},
		onvalid: function (){
			if ( visa_example.valid ) {
				$( '#visa_example .card' ).removeClass( 'error' ).addClass( 'ok' );
			}
		}
	} ).submit( function (){
		// rewriting default submit code
		alert( 'Your card verified successfully.' );
		visa_example.processing( false );
	} );
<form id="visa_example">
	<div class="card">
		<div class="card-title">Payment details:</div>
		<div class="card-type">Visa</div>
		<div class="card-number">Card number</div>
		<input type="text" name="card" data-rules="* cv" placeholder="xxxxxxxxxxxxxxxx"/>

		<div class="card-expiration">Expiration</div>
		<div class="card-cvc">CVC code</div>
		<select name="month" data-rules="*">
			<option value="1">January</option>
			<option value="2">February</option>
			<option value="3">March</option>
			<option value="4">April</option>
			<option value="5">May</option>
			<option value="6">June</option>
			<option value="7">July</option>
			<option value="8">August</option>
			<option value="9">September</option>
			<option value="10">October</option>
			<option value="11">November</option>
			<option value="13">December</option>
		</select>
		<select name="year" data-rules="*">
			<option value="2013">2013</option>
			<option value="2014">2014</option>
			<option value="2015">2015</option>
			<option value="2016">2016</option>
			<option value="2017">2017</option>
		</select>
		<input type="text" name="cvc" data-rules="* dec lr=[3,4]" placeholder="123"/>
	</div>
	<input type="submit" value="Pay with Visa"/>
</form>



Request validation demo:
Some field:
Code:
HTML
JavaScript
(click to see the code)
	var request_example = tFormer( 'request_example', {
		fields: {
			field_name: {
				request: {
					url   : 'ajax.html',
					method: 'post',
					data  : {
						custom_param: 'custom value',
						twitter     : '@TjRus'
					},
					start : function (){
						console.log( 'request validation started' );
					},
					end   : function ( result ){
						console.log( 'request validation ended' );
						return this.value == 'true';
					}
				}
			}
		}
	} ).submit( function (){
		// rewriting default submit code
		alert( 'Your request form verified successfully.' );
		request_example.processing( false );
	} );
<form id="request_example" style="width: 400px">
	Some field: <input type="text" name="field_name" required />
	<input type="submit" value="Login"/>
</form>



Check button demo
Some field:
Code:
HTML
JavaScript
(click to see the code)
	var check_button_example = tFormer( 'check_button_example', {
		fields: {
			field_name: '* l>=10'
		}
	} ).submit( function (){
		// rewriting default submit code
		alert( 'Your form verified successfully.' );
		check_button_example.processing( false );
	} );
<form id="check_button_example" style="width: 400px">
	Some field: <input type="text" name="field_name" />
	<input type="button" data-check="field_name" value="<-- Check that field" />
	<input type="submit" value="Submit"/>
</form>

Discussion:

comments powered by Disqus