Easily learn jQuery plug-in EasyUIEasyUI Form Verification _ jquery

Source: Internet
Author: User
Tags contact form
This article focuses on EasyUI Form Verification and shows you how to submit forms. For more information, see I. EasyUI creates an asynchronous submission form
This article shows you how to submit a Form through easyui ). Create a form with the name, email, and phone fields. Use the easyui form (form) Plug-in to change form to ajax form (form ). Form submits all fields to the backend server, and the server processes and sends some data to the front-end page. We receive and display the returned data.

Create a Form)

 

Ajax Form

Change to Ajax form

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

Server code

form1_proc.php $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone'];  echo "Your Name: $name 
Your Email: $email
Your Phone: $phone";

Ii. EasyUI Form Verification
It will show you how to verify a form. The easyui framework provides a validatebox plugin to verify a form. In this tutorial, we will create a contact form and apply the validatebox plug-in to verify the form. Then you can adjust the form as needed.

Create a form)

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

 

Form Validation

We add a style named easyui-validatebox to the input tag, so the input tag applies verification according to the validType attribute.
Prevents form submission when the form is invalid.

When you click the submit button of a form, if the form is invalid, we should prevent the form from being submitted.

 $('#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 prompt is displayed.

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

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.