Form v 1.3.5

A Form which handles (almost) everything for you. Check out a full featured example here

Options read more about inline data attributes

option	default	possible values	description	since	info
submitbutton	'button.submit'	[jQuery Selector]	A jQuery selector which gets the submit action. Can be a jQuery object (>=1.2)	1.0
resetbutton	'button.reset'	[jQuery Selector]	A jQuery selector which gets the submit action. Can be a jQuery object (>=1.2)	1.0
method	'post'	'post' | 'get'	The method which will be used for sending the form	1.0	Will get overwritten by the form's method attribute
action	null	string	The reciver address on the server (e.q. submit.php).	1.0	Will get overwritten by the form's action attribute
ajax	true	true | false	send the form with an ajax request. requires for callback function. If set to false it uses native form submit	1.1
serialize	false	true | false	If set to false an object is sent to the server. If set to true it will send a serialised version of the data (key=value&key2=value2)	1.0
status	true	true | false	Set a status message after the submit button	1.0
sent	false	true | false	is true after the form is sent	1.0
confirmSend	true	true | false	a confirmation box appear if set to true and option 'sent' is true	1.0
text	[texts]	object	an object with all required texts	1.0
parseQuery	true	true | false	parse the query string from the location and fill the form with the data	1.0	Fill the example form with something or check out the full featured example here
onRequireError	function(){}	function(element)	callback if an required field isn't set. element is the respective jQuery element (input, textarea,...)	1.0
onValidError	function(){}	function(element)	callback if an valid field isn't valid. element is the respective jQuery element (input, textarea,...)	1.0
onPasswordError	function(){}	function(element)	callback if an error occured on a password field. element is the respective jQuery element	1.0
onFileError	function(){}	function(element)	callback if an error occured on a file upload field. element is the respective jQuery element	1.1
onBeforePrepare	function(data){}	function(data)	function before the form will collect and prepare the data from the inputs. Form will not be sent if this returns false	1.2
onBeforeSubmit	function(data){}	function(data)	function to handle the data before the form will get send. Form will not be sent if this returns false. Can return a new data object which will be used for sending (>=1.2)	1.0
onReset	function(){}	function()	callback if form get resetted. can return false to prevent reset	1.2
onComplete	function(){}	function(textStatus, jqXHR)	callback if the form was sent. regeardless if successful or not	1.0
onError	function(){}	function(textStatus, error, jqXHR)	callback if the form was sent and an error occures.	1.0
onSuccess	function(){}	function(data, textStatus, jqXHR)	callback if the form was sent succesful. data holds the response from the server	1.0

Methods

method name	default	arguments	description	since	info
disable			disables the Form	1.0
enable			enables the Form	1.0
reset			resets the form	1.2
submit			submits the form	1.0
unserialize		querystring	unserialze the querystring and fills the form. Uses location.search if no querystring is set	1.0
set		key, value	sets the the option 'key' with the value 'value'	1.0

Usage

$(selector).wl_Form([options]);

Calling Methods

$(selector).wl_Form('method', [,arg [,arg]]);

Markup

<form action="submit.php" method="post">
	<fieldset>
		<label>Fieldset Label</label>
		<section><label for="input">Label</label>
			<div><input type="text" id="input" name="input" required></div>
		</section>
		...
		<section>
			<div><button>Submit</button></div>
		</section>
	</fieldset>
</form>

Example

Fieldset Label

Label

ResetSubmit

<form action="submit.php" method="post" data-ajax="false">
	<fieldset>
		<label>Native Submitting Form</label>
		<section><label for="input">Label</label>
			<div><input type="text" id="input" name="input" required></div>
		</section>
	</fieldset>
</form>

$('form').wl_Form({
	ajax:false
});