PHP JQuery Ajax Submit and verify form form

PHP jQuery Ajax form submission and validation instance resolution, including creating a form HTML page, adding jquery code, jquery Ajax form submission, jquery ajax form validation, feedback to the user. PHP Ajax form Verification, PHP Ajax submission form, PHP ajax form validation, PHP Ajax submit form.   This example uses the functions and functions of the JQuery class library itself, and all form information is sent in the form of Phpmailer class library mail.   1, create a form HTML page   form part of the HTML code   The following refers to the content:/*** * php100.com * 2013-06-28 ***/<div id= "Contact_form" & gt;  <form name= "Contact" method= "POST" action= "" >  <fieldset>  <label for= "name" id= " Name_label "> Name </label>  <input type=" text "name=" name "id=" "Name" size= "value=" "class=" Text-input "/>  <label class=" error "for=" name "id=" Name_error "> This must be filled </label> <label for=" email "Id=" Email_label > Your email</label>  <input type= "text" name= "email" id= "email" size= "" value= "" class= "Text-input"/>  <label class= "error" for= "email" id= "Email_error" > This must be filled </label> <label For= "Phone" id= "Phone_label" > Your tel </label>  <input type= "Text "name=" phone "id=" phone "size=" "value=" "class=" Text-input "/>  <label class=" error "for=" Phone "id=" Phone_error "> This must be filled </label> <br/>  <input type=" Submit "name=" Submit "class=" button "id=" Submit _btn "value=" I want to send "/>  </fieldset>  </form>  </div> here with an ID for Contact_form To contain the entire containing information; This makes sense, and it will later be used when JavaScript interacts with the user, where the form tag's properties contain both method and action; This is not very meaningful because JavaScript directly operates the DOM, so there are no two Attributes are also available, and it is important to give the user input   tags a separate id, which is similar to the 2nd principle. Otherwise, you cannot see the normal effect.   2, add jquery code   Here assume you've downloaded the jquery Kikuyu from the jquery official website and uploaded it to your Web server and added it to the Web page you're using.   Now create a new JS file   The following refers to the content:/*** * php100.com * 2013-06-28 ***/$ (function () {  $ (". Button"). Click (function () {  //processing form validation and handing back logic  }); });  the function () functions in line 1th are the same as the Document.ready   function of jquery, both in DOM &N BSP; automatically triggered when ready. The 2nd line inside is a click Trigger function clicks (), it should be noted that in the HTML page submit button on the need to place a name "button" class, to simulate the implementation of the Submit form function, from the 2nd we can see that JQuery can be very good toSeparation of structure and logic.   3, jquery ajax form validation   In practical applications, this step is essential. When the user is missing, fill in the wrong item, prompt.   The following are references:/*** * php100.com * 2013-06-28 ***/$ (function () {  $ ('. Error '). Hide ();  $ (". Button"). Click (Fun Ction () { //Validation code $ ('. Error '). Hide ();  var name = $ ("Input#name"). Val ();  if (name = = "") {  $ ("label #name_error "). Show ();  $ (" Input#name "). Focus ();  return false; }  var email = $ (" Input#email "). Val ();  if (email = = "") {  $ ("Label#email_error"). Show ();  $ ("Input#email"). Focus ();  return False ; }  var phone = $ ("Input#phone"). Val ();  if (phone = "") {  $ ("Label#phone_error"). Show ();  $ ( "Input#phone"). Focus ();  return false; }}); }); In line 2nd, we add a $ ('. Error '). Hide () is a label label that hides three class= "error" prompts incorrectly when the user does not enter any information. The error appears only if there is an error, which is empty, because there is a return false effect, and only one error occurs at a time.   in JQuery, get the value of an ID or Class in the DOM   the following reference content:/*** * php100.com * 2013-06-28 ***///Get ID value   var name =$ ("Input#name"). Val (); //Get the value of class ordinal 1   var name = $ (". Name") [1].val ();  now assume that the user did not enter a name, the processing logic should be: First display the error, Then position the focus on the name.   The following references:/*** * php100.com * 2013-06-28 ***/if (name = = "") {//user name is null   $ ("Label#name_error"). Show (); Error tip   $ ("Input#name"). focus (); Focus positioning   return false; Returns  } must return false when validating on a required field, otherwise a required entry is submitted without completing the fill.   4, Jquery Ajax Submission Form   This is the core step of implementing no refresh submission by submitting the table-item values that JavaScript obtains from the DOM via AJAX functions and then submitting them asynchronously to the spooler process.php and sending email , this step is immediately after the validator:   The following is a reference:/*** * php100.com * 2013-06-28 ***/var datastring = ' name= ' + name + ' &email= ' + email + ' &phone= ' + phone; //alert (datastring); return false; $.ajax ({  type: "POST",  URL: "bin/process.php",  data:datastring,  () success:function $ (' #contact_form '). HTML ("<div id= ' message ' ></div>");  $ (' #message '). HTML ("