JQuery form plugin jquery. form. js and jquery form validation plugin

Last Update:2015-01-19 Source: Internet

Author: User

Tags jquery form validation

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JQuery form plugin jquery. form. js and jquery form validation plugin

Overview

JQuery Form Plugin allows you to easily upgrade forms submitted in HTML Form to forms submitted using AJAX technology.

The main methods in the plug-in are ajaxForm and ajaxSubmit, which can collect information from the form component to determine how to process the form submission process.

Both methods support many optional parameters, allowing you to completely control the submission of data in the form.

Getting started

1. Write a form on your page. A common form does not require any special markup:

<Form id = "myForm" action = "login. action "method =" post "> name: <input type =" text "name =" name "/> Email: <input type = "text" name = "email"> <input type = "submit" value = "submit"/> </form>

2. Introduce the jQuery and jquery. form. js script files and add a few simple codes to initialize the form after the DOM is loaded:

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="js/jquery.form.js"></script>$(function() {$('#myForm').ajaxForm(function() {alert("submit success!");});})

After the form is submitted, the value of name and email will be submitted to login. action. If the server returns the successful status,

The user will see a prompt message "submit success! ".

Form Plugin API

The Form Plugin API provides many useful methods for you to easily process the data and Form submission processes in the Form.

AjaxForm

Pre-process the form to be submitted using AJAX to add all the event listeners that need to be used to it. It does not submit this form.

Use ajaxForm in the ready function of the page to prepare the AJAX submission for the form on the page.

AjaxForm requires zero or one parameter. This unique parameter can be a callback function or an optional parameter object.

$('#myFormId').ajaxForm();

AjaxSubmit

Submit the form in AJAX mode immediately. The most common usage is to call the form when the user submits the form action.

AjaxForm requires zero or one parameter. A unique parameter can be a callback function or an optional parameter object.

$ ('# MyFormId'). submit (function () {$ (this). ajaxSubmit (function () {alert ("success! ");}); Return false; // The default submission of blocked forms });

FormSerialize

Serialize a form into a query string. This method returns a string, for example, name1 = value1 & name2 = value2.

var queryString = $('#myFormId').formSerialize();$.post('login.action', queryString);

ResetForm

You can call the method on the form element's internal DOM to reset the form to its initial state.

$('#myFormId').resetForm();

ClearForm

Clears the values of all elements in the form. This method clears all the text boxes, password boxes, and values in the text fields, and removes all selected items from the drop-down list,

Make all check boxes and selected items in a single sequence unselected.

$('#myFormId').clearForm();

Optional parameter item object

Both ajaxForm and ajaxSubmit support a large number of optional parameters, which are passed in through the optional parameter item object.

The optional parameter item object is a simple JavaScript Object, which contains some attributes and values: for specific parameters, see the API

Sample Code

The following example demonstrates basic common parameters and How to Use callback functions before and after form submission.

<Body> <form id = "myForm" action = "login. action "method =" post "> name: <input type =" text "name =" name "/> </br> gender: <input type = "radio" name = "sex" value = "1"> male <input type = "radio" name = "sex" value = "0"> female </ br> Email: <input type = "text" name = "email"> </br> <input type = "submit" value = "submit"/> </form> </body> <script type = "text/javascript"> $ (function () {var options = {beforeSubmit: showRequest, // callback success: showResponse before submission, // callback clearForm: true after submission is successful // clear all form data after submission // url: url // overwrite the action attribute value in form // type: type // 'get' or 'post', overwrite the method attribute value in form // dataType: null // 'xml ', 'script', or 'json'}; $ ('# myform '). submit (function () {$ (this ). ajaxSubmit (options); return false ;}) function showRequest (formData, jqForm, options) {var queryString =$. param (formData); console.info ('submitted data: '+ queryString); return true;} function showResponse (responseText, statusText) {var s = eval ("(" + responseText + ")"); console.info (s); // console.info (statusText) returned from the background;} </script>

Author: itmyhome

Example: http://download.csdn.net/detail/itmyhome/8374087

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More