Submit forms using jQuery validate and serialize

jQuery validate and serialize
jQuery validate and serialize

We were getting a lot of requests to write a tutorial on how to submit forms using jQuery validate and serialize. Now we got some time to write this tutorial with examples.

In this tutorial, we will be using the following terms (technical terms)

  • Jquery
  • Ajax
  • Serialize
  • WordPress
  • shortcode
  • jQuery Validate
  • submitHandler

We believe you are already familiar with all the above terms. If not then it’s not the end of the world. We will try to cover some basic understanding of these terms (wherever possible)

Let’s start with what we will create in this tutorial

Table of content

  • Create a shortcode for the form
  • Add jquery validate library
  • Add Validate script
  • Add submitHandler
  • Add ajax callback to save form data
  • Add some CSS (Optional)

Create a shortcode for the form – jQuery validate and serialize

First of all, we need a form that we will submit/save using ajax. We will create the form inside a WordPress shortcode. Add the following code inside the active theme’s functions.php file

Add jquery validate library – jQuery validate and serialize

Now add the following line of code to your active theme’s footer.php

Add Validate script – jQuery validate and serialize

Now add the following code under the above script tag. This code is to add a validate script to different form fields. You can change the script according to your form fields.

Add ajax callback to save form data – jQuery validate and serialize

Add the following code to the active theme’s functions.php

Add some CSS (Optional)

Just to change the look and feel of the forms, we have added the following css. You can add this css code to your active theme’s style.css file.