Comment Form Validation for WordPress

Comment form validation creates a friendly user experience. When using the default wordpress comment system, if the user doesn’t fill out all the require fields, they are redirected to a new page displaying an error message.

The user now has to press the ‘back’ button in their browser window and they may or may not lose information they have already entered in.

To solve this problem, i’ll show you how jQuery can be used so comment form errors are displayed to the user without leaving the page.

To keep the page loading times fast, we are going to use the minified versions of jQuery and jQuery Validate from the Google and Microsoft CDN servers. Let’s only load the required code if any single post is being displayed – and if comments are open.

Open your theme function.php file and add :

function comment_validation_init() {
if(is_single() && comments_open() ) { ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#commentform').validate({

rules: {
	author: {
		required: true,
		minlength: 2
	},

	email: {
		required: true,
		email: true
	},

	comment: {
		required: true,
		minlength: 20
	}
},

messages: {
	author: "Please enter in your name.",
	email: "Please enter a valid email address.",
	comment: "Message box can't be empty!"
},

errorElement: "div",
errorPlacement: function(error, element) {
	element.before(error);
}

});
});
</script>
<?php
}
}
add_action('wp_footer', 'comment_validation_init');

Now let’s go over the code and it’s options.

The rules section

  • Author – required field with a minimum length of 2 characters.
  • Email – required field with a valid email address.
  • Comment – required field with a minimum length of 20 characters.

They can easily be adjusted to anything you want.  Change “true” to “false” to remove validation for any field.

The messages section

This is where you control the error message you would like to be displayed when :

  • The form field is not vaild.
  • The user does not fill in the required field.

The errorElement option sets the error message to be displayed in a html <div> section. This is done so the error message doesn’t mis-align any of the form boxes.

The errorPlacement options sets where you want the message to be displayed. It’s currently set to display the message -above- the invalid form element.

All there is left to do is add a little color to the error messages. Open your theme style.css file and add :

.error  { font-size: 12px; padding: 0 0 5px 0; color: #FF0000; }
input.error, textarea.error { background: #FFD2D2; color:#000000; }

The end result should look like this :

WordPress Comment Form Validation

That’s it! You now have a lightweight jQuery comment form validation that works for Internet Explorer, Firefox and Google Chrome.

Let me know in the comments if this has helped you out and if you would like a jQuery tutorial on something else!

31 Comments ... read them below or add one.

Barry January 16, 2013 at 6:55 pm 1

Wow … this is great! It took me literally 30 seconds to get it running on my site. I really hated the fact commenters had to press the ‘back button’ on any validation error. This solves the issue perfectly …

Dave January 19, 2013 at 11:21 am 2

Glad I could help!

Ciro May 19, 2013 at 7:45 pm 3

Great!, so many thanks.

Marco July 5, 2013 at 12:50 am 4

I had to replace your add_action with:
add_action(‘wp_print_scripts’, ‘comment_validation_init’);

Xuan-Loi Vu July 20, 2013 at 3:53 am 5

Hi Dave Hannon.
Thank you very much for the tutorial. It helps me a lots.

Adam Mould September 30, 2013 at 1:20 pm 6

Hi Dave,

Thanks for the tutorial, it was exactly how I wanted to implement jQuery validate into WordPress!

sam October 5, 2013 at 7:52 pm 7

Thanks for the tutorial,.. I did extraly what you have here but my page won’t use the css for the class “error”. The error message switched to the top of the elements of my form but the letters remain grey . Any help would be appreciated. By the way, I am using bootstrap with a Wordpress template.

Dave October 6, 2013 at 10:48 am 8

@sam – try this instead :
div.error { font-size: 12px; padding: 0 0 5px 0; color: #FF0000; }

Let me know if that works for you.

sam October 6, 2013 at 4:35 pm 9

Thanks for the quick response Dave. I was able to make it work and actually what I needed was to clear the cache of my browser lol.
Thanks for the tutorial

Dave October 6, 2013 at 8:22 pm 10

You’re welcome and thanks for letting me know!

velu November 14, 2013 at 11:46 pm 11

thanks

arun November 18, 2013 at 10:42 pm 12

Thank you … soo much…

Avadhesh Bhatt November 20, 2013 at 4:24 am 13

thanks for it !!!

testor December 19, 2013 at 1:32 am 14

Time savor!

Thanks

Martin January 10, 2014 at 6:52 am 15

Can this also work for multiple forms on a page, if I give each form a different id? Or what do I have to do to make this work?

Dave January 13, 2014 at 2:37 pm 16

Yes, you just need to add the form ID names to this line :

Find:
$(‘#commentform’).validate

Replace:
$(“#commentform, #newform, #anotherform”).validate

Martin January 20, 2014 at 3:21 am 17

Hi Dave,

Ok, thank you but how can I do this if I give each commentform the ID of the PostID, like #commentform1022 for postID 1022 and for example #commentform1038 for postID 1038 and so on….
There can be many commentforms on a page which all get the ID of the posts on that page!

festus February 6, 2014 at 6:00 am 18

Thanks for this helpful script, you saved me tons of time, keep up the good work, cheers

amelia February 7, 2014 at 10:41 am 19

This worked great on the single page but not on a custom post page that I aded a loop and the comment form to. I took out the is_single conditional. Is there something else that I’m not considering? Thanks for this.

Dave February 8, 2014 at 12:30 pm 20

@Amelia – You can try this (from the WordPress codex) : To check for all the post types, use the is_singular() function.

So just replace is_single() with is_singular().

kamlesh March 12, 2014 at 11:28 pm 21

what about messages like this

“Duplicate comment detected; it looks as though you’ve already said that!”

Victor March 20, 2014 at 1:37 am 22

This is amazing Dave, i hated the default error display by WordPress. Am smiling as it saved me a lot of time, keep up cheers!

Josh Weikel March 28, 2014 at 9:24 am 23

Solid tutorial, suggestion though:
Why wait until the user clicks submit (at least this is how it’s behaving for me)? Trigger validation in real time by adding:

onfocusout:function(element){if( !this.checkable(element) ){ this.element(element); } }

to the validate() call. Also, my knowledge may be incomplete, but why not add this to a js file instead? I’ve done so and it seems to accomplish the same result with the advantage of being tidier.

Great tutorial nonetheless.

shihab May 16, 2014 at 4:37 am 24

I used it. It’s work’s fine , thanks a lot.

Pughalveni June 13, 2014 at 2:14 am 25

“The error message mis-align the form boxes.”– I was trying to fix this for the long time.. Thanks a lot for your post .

Pooja Rathour June 26, 2014 at 12:25 am 26

This is amazing Dave, i hated the default error display by WordPress. Am smiling as it saved me a lot of time, keep up cheers!

vinoth August 13, 2014 at 6:04 am 27

thank u very much ……i get my result today……..

Jonathan September 25, 2014 at 1:13 am 28

This was very helpful and easy to implement! Not sure why this isn’t the default for Wordpress. Such a bad design to bring the user to a new page to display form errors.

Anna October 12, 2014 at 9:22 am 29

Wow! so simple! thanks a lot!

Robin Thomas October 24, 2014 at 7:00 am 30

Hey …. thanking you …. thank you very much.. You saved my lot of time.

frans November 17, 2014 at 6:11 pm 31

wow, thanks a lot …

Leave a Comment