Home > Developer > Web Develop

JQuery Ajax submission Form and form validation

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

JQuery Ajax submission Form and form validation Blog Category:
    • Jsp/html/javascript/ajax/development Kit
    • Open Source Projects

Note: It is verified that the formvalidator is only suitable for a single page with no more than one form.

This example implements the ability to submit a form via Ajax and validate the form's data before submitting it.
Mainly through two plug-ins to achieve:
The first one:
JQuery Form Plugin
Http://jquery.malsup.com/form main function is the AJAX submission form

The second: JQuery formvalidator domestic powerful form validation plugin.
Http://www.cnblogs.com/wzmaodong

The simplest examples are as follows:

HTML code
  2. <html>
  4. <head>
  6. <title> Form</title>
  10. <!--introducing jquery--
  12. <script src="<?php Echo base_url () >style/jquery.js" type="Text/javascript"></   script>
  16. <!--Introducing jquery Formvalidator---
  18. <link  type= "Text/css"  rel= "stylesheet"  < Span style= "color: #ff0000;" >href= "<?php echo base_url ()?> Style/form_valide/style/validator.css " > </link>   
  20. <script  src= type= "Text/javascript"  charset= "UTF-8" ></script>   
  22. <script src="<?php echo base_url ()? >style/form_valide/formvalidatorregex.js" type="Text/javascript " charset=" UTF-8 "></script>
  26. <!--Introducing jquery Form Plugin---
  28. <script type="Text/javascript" src= "<?php echo base_url ()? >style/ajax_form/jquery.form.js" ></script>
  32. <script type="Text/javascript">
  34. $ (document). Ready (function () {
  36. Provides a callback function that provides handling of the result of a commit return
  38. var options = {
  40. Success:function (data) {
  42. alert (data);
  44. }};
  48. Initializes the validation plug-in, and if the commit error occurs, the dialog box pops up and, if correct, submits the form request via Ajax.
  50. $.formvalidator.initconfig ({
  52. Formid: "Form1",
  54. Onerror:function (msg) {alert (msg)},
  56. Onsuccess:function () {$ (' #form1 '). Ajaxsubmit (options); return false;}
  58. });
  62. Form validation
  64. $ ("#test1"). Formvalidator ({
  66. OnShow: "Please enter the user name, only input \" maodong\ "is Right",
  68. onfocus: "User name at least 6 characters, maximum 10 characters",
  70. Oncorrect: "The user name can be registered"})
  72. . Inputvalidator ({min:6,max:10,onerror: "The user name you entered is illegal, please confirm"})
  74. . Regexvalidator ({regexp: "username", datatype: "Enum", OnError: "Incorrect user name format"});
  78. });
  80. </Script>
  84. </head>
  86. <body>
  87. <form action= " php  echo site_url ("welcome/post") ?> " < Span style= "color: #ff0000;" >method= "post"  name= "Form1"  id= "Form1" >   
  89. <TD align="right"> user name:</td>
  90. <TD><input type= "Text"  name= "test1" < Span style= "color: #0000ff;" >id= "Test1"  style=< Span style= "color: #0000ff;" > "width:120px"  value= />< span class= "tag" ></td>   
  92. <TD><div id="Test1tip" style="width:250px"></div></td >
  96. <input    type="Submit" name="button" id="button" value="Submit" />
  100. </form>
  102. </Body>
  104. </html>

The success callback function is not executed and may be a request-time error. Try to parse the data returned by the server into datatype format before calling the success method, and try Error:function (xmlresponse) {alert (Xmlresponse.responsetext)}.

Such as:

var options={
Target: ' #output1 ',//Put the server back into an element with ID OUTPUT1
Beforesubmit:showrequest,//Pre-commit callback function
Success:showresponse,//post-commit callback function

Error:function (xmlresponse) {alert (Xmlresponse.responsetext)},
Url:url,//default is the action of form, if stated, Overrides
Type:type,//default is the method of form (' get ' or ' post '), if stated, will overwrite
Datetype:null,//' xml ', ' script ', or ' JSON ' (type returned by the receiving server)
Clearform:true,//After successful commit, clears the values of all form elements
Resetform:true,//After successful commit, reset the values of all forms
timeout:3000//Limit the request time, when the request is greater than 3 seconds, jump out of the request
}

options for Ajaxform and Ajaxsubmit
In addition to the options listed below, you can also pass the standard $.ajax option to both functions.

Target ———— which elements in the specified page are used to respond to server-side updates. This value can be a jquery query string, or it specifies a jquery object, or a DOM element. Default value: null

Replacetarget ———— with the target option. When set to True, the specified portion of the target is replaced, or only its contents are replaced. Default value: False

The URL ———— specifies the URL to which the data is to be submitted. Default value: The Action property value of the form

Type ———— specify how the form is submitted: ' GET ' or ' POST '. Default value: The Method property value of the form (if none is ' GET ')

Data ———— The additional information to be submitted in the form of a singleton, format: data: {key1: ' value1′, Key2: ' value2′}

DataType ———— The data type of the server response, the value can be: null, ' xml ', ' script ', or ' json '. This option specifies how the server-side response is handled. It maps directly to the Jquery.httpdata method. If datatype is ' XML ', the server's response will be treated as XML, and the ' success ' callback function will be passed to the value of Responsexml. If datatype is ' JSON ', the server's response will be treated as a JSON object (via eval) and passed to the ' success ' callback function. If datatype is ' script ', the server's response will be eval into a global context. Default value: null

BeforeSerialize ———— The callback function before the form is serialized. It provides an opportunity to control the form before the value is fetched. One of the parameters is the form's jquery object, and the other is the option object passed to Ajaxform/ajaxsubmit. Default value: null

Beforeserialize:function ($form, Options) {
Returns false to cancel the commit operation
}
Beforesubmit ———— The callback function before the form is submitted. Typically used to process logic before a form is submitted, such as validating form data. If this callback function returns FALSE, the commit operation will be canceled. Its three parameters are an array of form data, a jquery object for the form, and an option object passed to Ajaxform/ajaxsubmit. Default value: null

Beforesubmit:function (arr, $form, options) {
The format of the first parameter:
[{name: ' username ', value: ' Jresig '}, {name: ' Password ', value: ' Secret '}]

Returns false to cancel the commit operation
}
Success a callback function when the server side generates a response ———— the form is successfully committed. It will be passed the following parameters:

1. Value of ResponseText or Responsexml (depending on the value of the datatype option)

2. StatusText

3. XHR (XMLHttpRequest object) (jquery encapsulated FORM element if the version of jquery is less than 1.4)

4. jquery encapsulated form elements (undefined if the version of jquery is less than 1.4)

Default value: null

Semantic ————— Specifies whether the submitted data follows the semantic order (slower than normal). Note In general, the serialization of a form follows the semantic order, unless there is a control of the image type. Set to True only if the server has strict requirements on the semantics of the submitted data and the form contains a control of the image type. Default value: False

Resetform ———— whether to reset the form when it is successfully submitted. Default value: null

ClearForm ———— whether to clear the form when it is successfully submitted. Default value: null

Whether the IFRAME ———— always put the server's response inside the IFRAME. Default value: False

IFRAMESRC ———— If the IFRAME option is true, the SRC attribute to be added to the IFRAME. Default value: About:blank, the default value for pages that use the HTTPS protocol is: Javascript:false

Forcesync ———— Specifies whether to remove short delays when uploading a file or submitting a form using the IFRAME option. This delay is used by the browser to render the DOM before the original commit operation. This improves usability by giving users hints such as "Please Wait". Default value: False

Examples of options:

Prepare option Object
var options = {
Target: ' #divToUpdate ',
URL: ' comment.php ',
Success:function () {
Alert (' Thanks for your comment! ');
}
};

Passing the option object to the Ajaxform function
$ (' #myForm '). Ajaxform (options);

JQuery Ajax submission Form and form validation

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.

Related Keywords:
ajax contact form with validation form validation example in jquery jquery accordion form with validation example jquery multi step form with validation php and javascript form validation javascript and php form validation file submission form

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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