Form

Override defaults with $.fn.form.defaults.

The form provides various methods to perform actions with form fields such as ajax submit, load, clear, etc. When submiting the form, the 'validate' method can be called to check whether or not a form is valid.

Usage

Create a simple HTML form. Construct this as you normally would with and id, action and method values.

To make the form become ajax submit form

To do a submit action

Submit with extra parameters

Handle submit response

Submitting an ajax form is very simple. Users can get the response data when the submission is finished. Notice that the response data is the raw data from server. A parse action to the response data is required to get the correct data.

For example, response data is assumed to be JSON, a typical response data may look like this:

Now handle the JSON string in 'success' callback function.

Properties

Name Type Description Default
novalidate boolean False to validate the form fields. Available since version 1.4. false
iframe boolean Defines if to submit a form using iframe mode. True to submit the form inside a iframe. False to send the form with ajax. Available since version 1.4.5. true
ajax boolean Defines if to submit form with Ajax. Available since version 1.4. true
dirty boolean Defines if to submit only the changed fields. Available since version 1.5. false
queryParams object The additional parameters that will be sent to server when posting a form. Available since version 1.4. {}
url string The form action URL to submit null

Events

Name Parameters Description
onSubmit param Fires before submit, return false to prevent submit action.
onProgress percent Fires when upload progress data is available. This event does not fires when the 'iframe' property is set to true. Available since version 1.4.5.
success data Fires when the form is submitted successfuly.
onBeforeLoad param Fires before a request is made to load data. Return false to cancel this action.
onLoadSuccess data Fires when the form data is loaded.
onLoadError none Fires when some errors occur while loading form data.
onChange target Fires when the field values are changed. Available since version 1.4.2.

Methods

Name Parameter Description
submit options Do the submit action, the options parameter is an object which contains following properties:
url: the action URL
onSubmit: callback function before submit
success: callback function after submit successfuly

The example below shows how to submit a valid form and avoid duplicate submiting the form.

$.messager.progress();	// display the progress bar
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// hide progress bar while the form is invalid
		}
		return isValid;	// return false will stop the form submission
	},
	success: function(){
		$.messager.progress('close');	// hide progress bar while submit successfully
	}
});
load data Load records to fill the form. The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record.

Code example:

$('#ff').form('load','get_data.php');	// load from URL
$('#ff').form('load',{
	name:'name2',
	email:'mymail@gmail.com',
	subject:'subject2',
	message:'message2',
	language:5
});
clear none Clear the form data.
reset none Reset the form data. Available since version 1.3.2.
validate none Do the form fields validation, return true when all fields is valid. The method is used with the validatebox plugin.
enableValidation none Enable validation. Available since version 1.3.4.
disableValidation none Disable validation. Available since version 1.3.4.
resetValidation none Reset validation. Available since version 1.4.5.
resetDirty none Reset the dirty flag. Available since version 1.5.