Easily learn the jQuery plug-in EasyUI EasyUI form validation_jquery

1. Create asynchronous submission form with EasyUI
This article shows you how to submit a form (Form) through easyui. We create a form with name, email and phone fields. Change the form to an ajax form by using the easyui form plugin. The form submits all fields to the back-end server, and the server processes and sends some data back to the front-end page. We receive the return data and display it.

Create 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";

2. 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 plugin to validate the form. You can then adapt this form to suit your needs.

Create form

Let’s create a simple contact form with 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="easyui-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 called easyui-validatebox to the input tag, so the input tag will apply validation based on the validType attribute.
Prevent form submission when form is invalid

When the user clicks the submit button of the form, we should prevent the form from being submitted if the form is invalid.

 $('#ff').form({
 url:'form3_proc.php',
 onSubmit:function(){
 return $(this).form('validate');
 },
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

If the form is invalid, a message will be displayed.

The above will explain the form, including how to create an asynchronous submission form and how to perform form verification. I hope these can help everyone.