Create a Custom WordPress Comments Form Validation Plugin

13 May 2012 By Articles 2 Comments
13
May

Validating our WordPress comments form using jQuery is a great way to ensure a one click form submission and a greater user experience for our post contributor.

There is nothing more frustrating than completing a blog comments form to only realize that you have forgotten to complete a mandatory field after you have clicked the submit button. That well thought out comment has now been lost forever.

This can not only be frustrating to the end user however it can also deter users from contributing in your blog discussions. What if there was an easier way? A way to notify the users and post contributors of any errors as they are filling out the comments form. Well, using a little bit of jQuery code we can achieve exactly this and therefore provide a much better end user experience.

The basic WordPress Comments Form

The default WordPress Comments form

The default WordPress Comments form

The default basic WordPress comments form only requires the user to complete a few fields. These include:

  • The User full name
  • Email Address
  • Website URL
  • Comments

By default the built-in form validation provided by the WordPress core validates the user full name,the email address and the comment itself. If we submit the form without providing the mandatory fields the form will be submitted and we will see the following error message.

The default error message

The default error message

In this article we are going to walk through the process of creating a custom plugin to present the user with inline jQuery form validation when completing the WordPress comments form. This way they do not have to go to a new page to see if there are any error messages. We will display the error messages, if any when they click the comment form submit button.

Our Completed Custom Comments Validation plugin.

This is a screenshot of what our plugin is going to look like at the end of this tutorial. The great thing about validating the comment form in this manner is that if the user has JavaScript disabled the built-in WordPress core validation will still get run.

The completed plugin

The completed plugin

 

STEP 1: Create our plugin framework.

The first thing to do when creating a WordPress plugin is to create our plugin folder and create the skeleton or framework files. We are going to be using the jQuery Validation Plugin 1.9.0 from Bassistance.de jQuery comment validation library for our plugin.

In this article I am going to be using the Twenty Eleven theme that ships free with the latest version of WordPress.

  1. Navigate to your plugin directory: “wp-content/plugins”.
  2. Create a new folder called “custom-comments-validation”. This is the main plugin folder that will hold all the files for our plugin.
  3. Inside the “custom-comments-validation” folder create the below sub folders:
    • css
    • js
Plugin folder structure

Plugin folder structure

The “CSS” folder is going to contain our Cascading Style-sheet for the plugin. The “JS” folder is going to contain our JavaScript files.

 STEP 2: Create our main PHP plugin file

Now, we want to create our main PHP plugin file that will be used to control our custom comments plugin. Open up your desired code editor and create a new .php file called custom-comment-validation.php. All WordPress plugins need a valid comment block of the top of the main file that feeds WordPress the valid information on the plugin.

Add the below code to the “custom-comment-validation.php” file

1
2
3
4
5
6
7
8
9
/**
* Plugin Name: Custom Comments Validation
* Plugin URI: http://www.wpinsite.com
* Description: Adds custom jQuery form validation to the WordPress comments form
* Version: 1.0
* Author: WPInsite
* Author URI: http://www.wpinsite.com
* License: GPL
*/
/**
* Plugin Name: Custom Comments Validation
* Plugin URI: http://www.wpinsite.com
* Description: Adds custom jQuery form validation to the WordPress comments form
* Version: 1.0
* Author: WPInsite
* Author URI: http://www.wpinsite.com
* License: GPL
*/

Most of the fields above are self explanatory however for a deeper incite into creating WordPress plugin visit the official WordPress plugin creation page.

STEP 3: Add the Comments Validation jQuery

Because our plugin is providing client side form validation we must provide the jQuery JavaScript library that we are going to use.
Navigate to the Bassistance.de website and download the latest version of the jQuery Validation Plugin

Once the files have been downloaded open and extract all the files.
Inside the directory you will see a file called jquery.validate.js.
Copy this file and place it into the “js” folder located within our plugin directory.

Copy the jquery.validate.js file

Copy the jquery.validate.js file

Inside our “js” folder we are going to have two JavaScript files. The first one being the jquery.validate library and a second file containing the jQuery code to control our plugin and process the actual comment form validation.

Create a new file called “custom-validation.js” and add the below code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(function($) {
var errorContainer = $("<div class='error'>Please fill out the required fields</div>").appendTo("#commentform").hide();
var errorLabelContainer = $("<div class='error errorlabels'></div>").appendTo("#commentform").hide();
$("#commentform").validate({
rules: {
author: "required",
email: {
required: true,
email: true
},
url: "url",
comment: "required"
},
errorContainer: errorContainer,
errorLabelContainer: errorLabelContainer,
ignore: ":hidden"
});
$.validator.messages.required = "";
$.validator.messages.email = "&raquo; " + $.validator.messages.email;
$.validator.messages.url = "&raquo; " + $.validator.messages.url;
});
jQuery(function($) {
var errorContainer = $("<div class='error'>Please fill out the required fields</div>").appendTo("#commentform").hide();
var errorLabelContainer = $("<div class='error errorlabels'></div>").appendTo("#commentform").hide();
$("#commentform").validate({
rules: {
author: "required",
email: {
required: true,
email: true
},
url: "url",
comment: "required"
},
errorContainer: errorContainer,
errorLabelContainer: errorLabelContainer,
ignore: ":hidden"
});
$.validator.messages.required = "";
$.validator.messages.email = "&raquo; " + $.validator.messages.email;
$.validator.messages.url = "&raquo; " + $.validator.messages.url;
});

This is the meat of the plugin. This code snippet instructs the jquery.validate library as to what form and what fields we want validated. This code will output the error notification messages to the user completing he comments form. Be sure to change the wording to your own needs.

STEP 4: Style our Comments Validation plugin

The final file that we want to create is the CSS file that will containing the styling to display when outputting our custom comment validation messages. This file will color the validation text red and also highlight the fields in red that were not completed. Once again you can customize this to your own needs.

Create a new CSS file called “custom-validation.css” and add the following CSS code:

1
2
3
#commentform input.error, #commentform textarea.error { background-color: #f99; }
#commentform div.error, #commentform label.error { color: #F00; }
#commentform div.errorlabels label { display: block; }
#commentform input.error, #commentform textarea.error { background-color: #f99; }
#commentform div.error, #commentform label.error { color: #F00; }
#commentform div.errorlabels label { display: block; }

STEP 5: Tie it all together and complete the plugin file

Now that we have our framework in place it is time to complete the plugin. To do this we need to go back to the main plugin file page: “custom-comment-validation.php” and complete the script to instruct WordPress the load the required files for our plugin.

Under the plugin header code that we added earlier, add the below code:

1
2
3
4
5
6
7
function init_comment_validation() {
wp_enqueue_style('commentvalidation', WP_PLUGIN_URL . '/custom-comment-validation/css/custom-validation.css');
wp_enqueue_script('jqueryvalidate', WP_PLUGIN_URL . '/custom-comment-validation/js/jquery.validate.js', array('jquery'));
wp_enqueue_script('commentvalidation', WP_PLUGIN_URL . '/custom-comment-validation/js/custom-validation.js', array('jquery','jqueryvalidate'));
}
 
add_action('init', 'init_comment_validation');
function init_comment_validation() {
wp_enqueue_style('commentvalidation', WP_PLUGIN_URL . '/custom-comment-validation/css/custom-validation.css');
wp_enqueue_script('jqueryvalidate', WP_PLUGIN_URL . '/custom-comment-validation/js/jquery.validate.js', array('jquery'));
wp_enqueue_script('commentvalidation', WP_PLUGIN_URL . '/custom-comment-validation/js/custom-validation.js', array('jquery','jqueryvalidate'));
}

add_action('init', 'init_comment_validation');

We use the WordPress wp_enqueue_style hook and the wp_enqueue_script hook to load our required plugin files.

Your completed plugin files should look like this

custom-comment-validation.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
/**
* Plugin Name: Custom Comments Validation
* Plugin URI: http://www.wpinsite.com
* Description: Adds custom jQuery form validation to the WordPress comments form
* Version: 1.0
* Author: WPInsite
* Author URI: http://www.wpinsite.com
* License: GPL
*/
 
function init_comment_validation() {
wp_enqueue_style('customvalidationcss', WP_PLUGIN_URL . '/custom-comment-validation/css/custom-validation.css');
wp_enqueue_script('jqueryvalidate', WP_PLUGIN_URL . '/custom-comment-validation/js/jquery.validate.js', array('jquery'));
wp_enqueue_script('commentvalidation', WP_PLUGIN_URL . '/custom-comment-validation/js/custom-validation.js', array('jquery','jqueryvalidate'));
}
 
add_action('init', 'init_comment_validation');
?>
<?php
/**
* Plugin Name: Custom Comments Validation
* Plugin URI: http://www.wpinsite.com
* Description: Adds custom jQuery form validation to the WordPress comments form
* Version: 1.0
* Author: WPInsite
* Author URI: http://www.wpinsite.com
* License: GPL
*/

function init_comment_validation() {
wp_enqueue_style('customvalidationcss', WP_PLUGIN_URL . '/custom-comment-validation/css/custom-validation.css');
wp_enqueue_script('jqueryvalidate', WP_PLUGIN_URL . '/custom-comment-validation/js/jquery.validate.js', array('jquery'));
wp_enqueue_script('commentvalidation', WP_PLUGIN_URL . '/custom-comment-validation/js/custom-validation.js', array('jquery','jqueryvalidate'));
}

add_action('init', 'init_comment_validation');
?>

js/custom-validation.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(function($) {
var errorContainer = $("<div class='error'>Please fill out the required fields</div>").appendTo("#commentform").hide();
var errorLabelContainer = $("<div class='error errorlabels'></div>").appendTo("#commentform").hide();
$("#commentform").validate({
rules: {
author: "required",
email: {
required: true,
email: true
},
url: "url",
comment: "required"
},
errorContainer: errorContainer,
errorLabelContainer: errorLabelContainer,
ignore: ":hidden"
});
$.validator.messages.required = "";
$.validator.messages.email = "&raquo; " + $.validator.messages.email;
$.validator.messages.url = "&raquo; " + $.validator.messages.url;
});
jQuery(function($) {
var errorContainer = $("<div class='error'>Please fill out the required fields</div>").appendTo("#commentform").hide();
var errorLabelContainer = $("<div class='error errorlabels'></div>").appendTo("#commentform").hide();
$("#commentform").validate({
rules: {
author: "required",
email: {
required: true,
email: true
},
url: "url",
comment: "required"
},
errorContainer: errorContainer,
errorLabelContainer: errorLabelContainer,
ignore: ":hidden"
});
$.validator.messages.required = "";
$.validator.messages.email = "&raquo; " + $.validator.messages.email;
$.validator.messages.url = "&raquo; " + $.validator.messages.url;
});

js/jquery.validate.js

This will contain the jQuery script for the jquery.validate.js file from the bassistance.de website.

css/custom-validation.css

1
2
3
#commentform input.error, #commentform textarea.error { background-color: #f99; }
#commentform div.error, #commentform label.error { color: #F00; }
#commentform div.errorlabels label { display: block; }
#commentform input.error, #commentform textarea.error { background-color: #f99; }
#commentform div.error, #commentform label.error { color: #F00; }
#commentform div.errorlabels label { display: block; }

Activate & test the plugin

At this stage we can start testing our newly developed custom comments validation plugin. Navigate to the “plugins” page within the WordPress Dashboard and activate the plugin.

Activate the plugin

Activate the plugin

Conclusion

There you go! It was a fairly short tutorial and a fairly small WordPress plugin. Just taking an hour out of your day to create a simple comments plugin like this can be a win, win situation providing a much better user experience for your blog users.

Be sure to check out our other great WordPress Articles and Plugins
Enjoy this article? If so, we would love to hear your thoughts in the comments below

 

Related Blog Posts

2 Responses to Create a Custom WordPress Comments Form Validation Plugin

  1. Hi,
    Will this also work on thesis and genesis framework? Any short and easy tutorial for these frameworks? :|

    Reply

Leave a Reply