Become Wordpress Professional - Your Ultimate Wordpress Guide

Saturday, 28 December 2013

How to Validate Custom forms with jQuery in Wordpress

Wordpress is always very flexible when it comes to its custom development part. Whilst there are thousands of plugins available to utilize within the wordpress including free as well as premium ones but certainly a time comes when there is need of an hour to custom develop a wordpress site. That may include building up a form.

This tutorial will help you create a form that is validated by jQuery at client's side but surely it is like a mark on a stone to validate the form at server side as well when the form has been submitted because the clients side information is never to be trusted therefore it is always the best practice to self secure as much as possible. In this tutorial we will be using jQuery and a jQuery form validation plugin to make it work.

We could have used just jQuery for validation but that would require us to write a lot of code depending upon how bigger the form that needs validated is. So here is how we validate custom forms with jQuery in wordpress.

The very first step is to make sure your wordpress theme not already includes a jQuery library. For that we need to log in to the wordpress admin panel and navigate to "Appearance" > "Editor" . Next you need to open up "header.php". Now have a look within the Opening <head> tag and the closing </head> tag if you can see any jQuery library already included. If there is no jQuery file already included, next we need to verify that our "theme-options.php" also does not have an action that embeds jQuery file. Search for "wp_enqueue_script" function and you will be able to see if the file has been included already or not.

For this tutorial Lets assume that we need to integrate the jQuery library also, so we can use Google's hosted jQuery library, copy the following code and paste it into "theme-options.php" file.

function add_jQuery_libraries() {
 
    // Registering Scripts
     wp_register_script('google-hosted-jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false);

     wp_register_script('jquery-validation-plugin', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js', array('google-hosted-jquery'));

    // Enqueueing Scripts to the head section
    wp_enqueue_script('google-hosted-jquery');
    wp_enqueue_script('jquery-validation-plugin');
}
 
// Wordpress action that says, hey wait! lets add the scripts mentioned in the function as well.
add_action( 'wp_enqueue_scripts', 'add_jQuery_libraries' );

Now that we have added the scripts next lets assume that we have a page template "FormTemplate.php" that contains our form. Your Form "MUST" have an "ID" just like this:

<form id="YourFormID">

Next open the file in an editor and add the following code just before the closing </body> tag:

$(document).ready(function(){
$('#YourFormID').validate();
});


Next you need to put a required keyword for the input fields that you want to be validated. Have a look at example below:

<input type="text" name="username" required />
Or for email input:
<input type="email" name="user_email" required />

Now that is it, here is where the magic begins, go to your page that has the template "FormTemplate.php" and your form will be validated on the client side with jQuery!

You can refer to the Validation plugin Documentation by Clicking here to create custom rules or to get to know about more functions

1 comment:

  1. It's worth noting that jQuery is loaded into Wordpress in no conflict mode. Therefore you may not be able to use the$ symbol to init a jQuery action

    ReplyDelete

Please Avoid Spamming. Comments will be moderated before they are published.