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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
add_shortcode("dcs_custom_user_form","dcs_custom_user_form"); function dcs_custom_user_form(){ ob_start(); ?> <form id="dcsForm"> <div class="dcs_form_control"> <input type="text" name="fname" placeholder="First Name"> </div> <div class="dcs_form_control"> <input type="text" name="lname" placeholder="Last Name"> </div> <div class="dcs_form_control"> <input type="text" name="email" placeholder="Email"> </div> <div class="dcs-btn-wrapper"> <input type="submit" name="submit" value="Submit"> </div> </form> <?php return ob_get_clean(); } |
Add jquery validate library – jQuery validate and serialize
Now add the following line of code to your active theme’s footer.php
1 |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script type="text/javascript"> jQuery("#dcsForm").validate({ errorClass: "dcs_invalid", validClass: "dcs_success", rules: { fname: "required", lname: "required", email: { required: true, email: true } }, messages: { fname: "First Name is required", lname: "Last Name is required", email: { required: "Email is required", email: "Invalid Email" } }, submitHandler: function(form) { var ajaxurl= '<?php echo admin_url( 'admin-ajax.php' ) ?>'; var dcsForm = jQuery(form).serialize(); jQuery.ajax({ url: ajaxurl, data: {"dcsForm":dcsForm, "action": "dcsAjaxCallFormSubmit"}, type: 'POST', success: function(data){ alert(data); } }); } }); </script> |
Add ajax callback to save form data – jQuery validate and serialize
Add the following code to the active theme’s functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*--ajax function to save info--*/ add_action('wp_ajax_dcsAjaxCallFormSubmit', 'dcsAjaxCallFormSubmit'); add_action('wp_ajax_nopriv_dcsAjaxCallFormSubmit', 'dcsAjaxCallFormSubmit'); // not really needed function dcsAjaxCallFormSubmit() { parse_str($_POST["dcsForm"], $_POST); update_user_meta(get_current_user_id(),'first_name',$_POST['fname']); update_user_meta(get_current_user_id(),'last_name',$_POST['lname']); update_user_meta(get_current_user_id(),'email',$_POST['email']); $resp['status'] = "success"; $resp['message'] = "data submitted"; echo json_encode($resp); die(); } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.dcs_form_control { padding: 15px; } .dcs_form_control input[type="text"] { width: 100%; } .dcs-btn-wrapper { text-align: center; margin-top: 15px; } /*validate error css*/ label.dcs_invalid { color: red; } |