jQuery - Formation

What is it?

Formation is a jQuery plugin that allows you to quickly create a form with validation without writing any HTML. You simply specify the container you wish to append the form to. By passing a few parameters into one of the formation function calls you can add different validation such as number, e-mail, url, phone number, or zip code. Each element that you create can be fully customized. You can set the class, id, or any other attribute that is native to that element. Enjoy!

Current Functionality

Dependencies

Tested In

To-do

Documentation

Functions

Options

OptionDescriptionPossible ValuesDefault
required[Determines if element is required]true or falsefalse
validation[Specifies what type of validation type an element has]number, phone, url, email, zip"none"
type[Used for input to determine what type of input to append]text, password"text"
action[Form attribute to indicate where the form should submit to]'ex. send_email.php'""
method[Form attribute to indicate whether to use the POST or GET method]POST, GET""
name[Sets the name attribute for an element]ex. "my_input"""
labelValue[The value of the label associated with a certain element]Any stringNo label element will be rendered
value[Used for buttons to set their value]Any string"Submit"
labelClass[Class for the label of a given element]Any stringDepends on element
labelID[ID for the label of a given element]Any stringDepends on element
className[Class attribute to be given to an element]Any stringDepends on element
id[ID attribute to be given to an element]Any stringDepends on element
name[Name attribute to be given to an element]Any stringDepends on element
rows[Number of rows for a textarea]"#""5"
cols[Number of columns for a textarea]"#""30"
multiple[Determines wether a select is a multiple select]true or falsefalse
legend[The value of a legend within a fieldset. Used for radios and checkboxes]Any string""
number[Sets the error message for number validation]Any string"Numbers only."
url[Sets the error message for url validation]Any string"Invalid URL."
email[Sets the error message for e-mail validation]Any String"Invalid e-mail."
zip[Sets the error message for zip code validation]Any String"Invalid zip code."
phone[Sets the error message for phone number validation]Any String"Invalid phone number."
blank[Sets the error message for blank field validation]Any String"Please complete this field."
captcha[Sets the error message for captcha field validation]Any String"Incorrect Captcha answer."
isAjax[Suppresses the default form submit action (for things like an AJAX form submit)]true or falsefalse
Note: The captcha feature will display the questions randomly.
captchaQuestions[Used for Captcha. Associative array of questions and answers for captcha.]{'question':'answer'}Random assortment of my own captcha questions
autoComplete[Turns autocomplete on or off]"on"" or "off""on"

Example

The following code will render the form below Note: The order that the functions are called is the order the elements will be rendered.

$(document).ready(function(){
	$("#demo").formation();
	$.formation.addInput({type:"text",labelValue:"First Name:",required:true, defaultValue:"Matt"});
	$.formation.addInput({type:"text",labelValue:"Last Name:",required:true});
	$.formation.addInput({type:"text",labelValue:"E-mail:",validation:'email',required:true});
	$.formation.addInput({type:"text",labelValue:"Age:",validation:"number"});
	$.formation.addRadios(["Mac","Linux","Windows","Ubuntu"],{
			required:true,
			labelValue:"Your favorite OS:",
			legend:"Operating Systems"
	});
        $.formation.addCheckboxes({"apples":"Apples","oranges":"Oranges","grapes":"Grapes"},{labelValue:"What do you like to eat?",required:false,legend:"Fruit!"});
	$.formation.addCaptcha({
		captchaQuestions: {
			'5 + 5 = ?' : '10',
			'What color is the sky?':'blue', 
			'2 + 2 = ?' : '4'
			},
		required:true
	});
	$.formation.addTextarea({
		name:"my_textarea",
		labelValue:"Describe yourself",
		required:true,
		cols:"60",
		rows:"10"
	});
        $.formation.addSelect({'1':'Yes','2':'No'},{labelValue:'Do you like jQuery?',required:true});
	$.formation.setErrorMessages({number:"Please enter a number."});
	$.formation.addButton({value: "SUBMIT"});
        $.formation.addButton({value: "RESET",type:'reset'})
}

Demo

Download

Formation v1.1.0 - 9kb - # of Downloads 3,007

Version History

mattnull.com