Easy Learning jquery plugin Easyui easyui form validation _jquery

Easyui Create an asynchronous submit form
This article shows you how to submit a form by Easyui. We create a form with the name, email, and phone fields. Use the Easyui form plug-in to change the form (form) to an AJAX form (form). The form (form) submits all fields to the backend server, and the server processes and sends some data back to the front-end page. We receive the returned data and display it.

Create forms (Form)

 <div style= "padding:3px 2px;border-bottom:1px solid #ccc" >ajax form</div> <form id=
 "ff" action= " form1_proc.php "method=" POST ">
 <table>
 <tr>
 <td>Name:</td>
 <td ><input name= "name" type= "text" ></input></td>
 </tr>
 <tr>
 <td> email:</td>
 <td><input name= "Email" type= "text" ></input></td>
 </tr>
 <tr>
 <td>Phone:</td>
 <td><input name= "Phone" type= "text" ></ input></td>
 </tr>
 <tr>
 <td></td>
 <td><input type= "Submit" value= "Submit" ></input></td>
 </tr>
 </table>
 </form>

Change to Ajax form

 $ (' #ff '). Form ({
 success:function (data) {
 $.messager.alert (' info ', data, ' info ');
 }
 );

Server-side code

form1_proc.php
 $name = $_post[' name '];
 $email = $_post[' email '];
 $phone = $_post[' phone '];
 
 echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

Second, Easyui form verification
will show you how to validate a form. The Easyui framework provides a Validatebox plug-in to validate a form. In this tutorial, we will create a contact form and apply the Validatebox plug-in to validate the form. Then you can adjust the form to suit your needs.

Create forms (Form)

Let's create a simple contact form with the name, email, subject, and Message fields:

 <div style= "padding:3px 2px;border-bottom:1px solid #ccc" >form validation</ div> <form id= "FF" method= "POST" > <div> <label for= "name" >Name:</label> <input class= "ea Syui-validatebox "type=" text "name=" name "required=" true "></input> </div> <div> <label for=" Email ">Email:</label> <input class=" Easyui-validatebox "type=" text "name=" email "required=" true " Validtype= "Email" ></input> </div> <div> <label for= "Subject" >Subject:</label> < Input class= "Easyui-validatebox" type= "text" name= "subject" required= "true" ></input> </div> <div > <label for= "message" >Message:</label> <textarea name= "message" style= "height:60px;"
></textarea> </div> <div> <input type= "Submit" value= "Submit" > </div> </form> 

We add a style named Easyui-validatebox to the input tag, so the input tag will apply validation based on the Validtype attribute.
Block form submission When the form is invalid

When the user clicks the Submit button for the form, if the form is invalid, we should block the form submission.

 $ (' #ff '). Form ({
 URL: ' form3_proc.php ',
 onsubmit:function () {return
 $). Form (' Validate ');
 success:function (data) {
 $.messager.alert (' info ', data, ' info ');
 }
 );

If the form is not valid, a hint message is displayed.

These are the explanations for the form, including how to create an asynchronous submit form, and how to validate the form, and hopefully that will help.