Jquery Form Verification plug-in jquery. Form. js

[Jquery framework application]: official form. js plug-ins

The form plug-in supports Ajax and Ajax File Upload. It is powerful and meets the needs of daily applications.

1. Download The jquery Framework Package

File: Jquery.rar Size: 29kb Download: Download

2. Download Form plug-in

File: Jquery.form.rar Size: 7kb Download: Download

3. Getting started with form plug-ins
Step 1: Add a form first

<form id="myForm" action="comment.php" method="post">      Name: <input type="text" name="name" />      Comment: <textarea name="comment"></textarea>      <input type="submit" value="Submit Comment" /> </form>

Step 2: Include jquery. js and form. js files

<script type="text/javascript" src="path/to/jquery.js"></script>      <script type="text/javascript" src="path/to/form.js"></script>       <script type="text/javascript">          // wait for the DOM to be loaded           $(document).ready(function() {              // bind 'myForm' and provide a simple callback function           $('#myForm').ajaxForm(function() {                  alert("Thank you for your comment!");              });          });      </script>

3. Detailed use of the form plug-in and application examples

Http://www.malsup.com/jquery/form/

======================================
When introducing form. JS, the author of this plug-in said the following sentence:

Submitting a form with AJAX doesn't get any easier than this!

Form plug-in API

Http://www.malsup.com/jquery/form/#api.

The form plug-in API provides several methods for you to easily manage form data and submit forms.

Ajaxform

Add all required event listeners to prepare for Ajax submission forms. The ajaxform cannot be submitted. In the ready function of document, ajaxform is used to prepare the Ajax submission form. Ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.
Chainable: Yes.

Instance:

$ ('# Myformid'). ajaxform ();

Ajaxsubmit

Ajax will submit the form immediately. In most cases, ajaxsubmit is called to respond to a user's submitted form. Ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.
Chainable: Yes.

Instance:
// Bind the form submission event Processor
$ ('# Myformid'). Submit (function (){
// Submit the form
$ (This). ajaxsubmit ();
// To prevent normal browsers from submitting forms and generating page navigation (to prevent page refreshing ?) Returns false.
Return false;
});

Formserialize

Serializes (or serializes) A form into a query string. This method returns a string in the following format: name1 = value1 & name2 = value2.
Chainable: No. This method returns a string.

Instance:
VaR querystring = $ ('# myformid'). formserialize ();

// You can use $. Get, $. Post, and $. Ajax to submit data.
$. Post ('myscript. php', querystring );

Fieldserialize

Serializes (or serializes) The form field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized. This method returns a string in the following format: name1 = value1 & name2 = value2.
Chainable: No. This method returns a string.

Instance:
VaR querystring = $ ('# myformid. specialfields'). fieldserialize ();

Fieldvalue

Returns the value of the form element that matches the inserted array. From version 0.91, this method will always return data in the form of arrays. If the element value is determined to be invalid, the array is empty; otherwise, it contains one or more element values.
Chainable: No. This method returns an array.

Instance:
// Obtain the password input value
VaR value = $ ('# myformid: password'). fieldvalue ();
Alert ('the password is: '+ value [0]);

Resetform

Restore the form to its initial state by calling the original DOM method of the form element.
Chainable: Yes.

Instance:
$ ('# Myformid'). resetform ();

Clearform

Clear form elements. In this method, all text input fields, password input fields, and textarea fields are empty to clear the selected fields in any select element, and reset all the single-choice (radio) buttons and multiple-choice (checkbox) buttons to unselected states.
Chainable: Yes.

$ ('# Myformid'). clearform ();

Clearfields

Clear the field element. Only some form elements need to be cleared.
Chainable: Yes.

$ ('# Myformid. specialfields'). clearfields ();

Options object

Both ajaxform and ajaxsubmit support many option parameters, which can be provided using an options object. Options is just a JavaScript Object that contains the following set of attributes and values:

Target

Specifies the elements on the page that are updated by the server response. The element value may be specified as a jquery selector string, A jquery object, or a DOM element.
Default Value: null.

URL

Specifies the URL for submitting form data.
Default Value: The action attribute value of the form.

Type

Method used to submit form data: "Get" or "Post ".
Default Value: The method property value of the form (if not found, the default value is "get ").

Beforesubmit

The callback function called before the form is submitted. The "beforesubmit" callback function is provided as a hook to run the pre-commit logic or verify the form data. If the "beforesubmit" callback function returns false, the form will not be submitted. The "beforesubmit" callback function has three call parameters: form data in array form, jquery form object, and options object passed into ajaxform/ajaxsubmit. The form array accepts the following data:

[{Name: 'username', value: 'jresig'}, {Name: 'Password', value: 'secret'}]

Default Value: NULL

Success

Callback Function called after the form is successfully submitted. If the "success" callback function is provided, it is called when the slave server returns a response. The value of the datatype option determines whether to return the value of responsetext or responsexml.
Default Value: NULL

Datatype

Expected data type. Null, XML, script, or JSON. Datatype provides a method that specifies how to process server responses. This is directly reflected in the jquery. httpdata method. The following values are supported:

'Xml': If datatype = 'xml', the server response is treated as XML. If the "success" Callback method is specified, the responsexml value is returned.

'Json': If ype = 'json', the server response will be evaluated and passed to the "success" Callback method if it is specified.

'Script': If datatype = 'script', the server response value is plain text.

Default Value: NULL (responsetext value returned by the server)

Semantic

Boolean flag indicating whether data must be submitted in strict semantic Order (slower ). note that the normal form serialization is done in semantic order with the exception of input elements of type = "image ". you shoshould only set the semantic option to true
If your server has strict semantic requirements and your form contains an input element of type = "image ".
Boolean sign, indicating whether data must strictly follow the semantic Order (slower ?) . Note: In general, the form has been serialized (or serialized) in the semantic order, except for the input element of type = "image. If your server has strict semantic requirements and the form contains an input element of type = "image", set semantic to true. Because this paragraph cannot be understood, the translation may not be satisfactory, but please correct it .)
Default Value: false

Resetform

Boolean flag, indicating whether to reset the form if it is submitted successfully.
Default Value: NULL

Clearform

Boolean flag, indicating whether to clear the form data if the form is submitted successfully.
Default Value: NULL

Instance:

// Prepare the options object
VaR Options = {
Target: '# divtoupdate ',
URL: 'comment. php ',
Success: function (){
Alert ('Thanks for your comment! ');
}};

// Pass options to ajaxform
$ ('# Myform'). ajaxform (options );

Note: The options object can also be used to pass the value to the $. Ajax method of jquery. If you are familiar with the options supported by $. Ajax, you can use them to pass options objects to ajaxform and ajaxsubmit.