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_singular() && comments_open() ) { ?>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
jQuery(document).ready(function($) {

onfocusout: function(element) {

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) {

add_action('wp_footer', 'comment_validation_init');

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

The onfocusout section

This enables “real time” validation. If you prefer to only validate -after- the user clicks on the “Post Comment” button, just remove that entire section.

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!

54 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


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!


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 :


$(“#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 …

Nimesh January 28, 2015 at 10:45 pm 32

Hannon, thanks for this code and this is what I want.
One more feature that I want, how to check captcha validation with you code, I know the condition for blank captcha field validation but what about if the user can add the wrong captcha, is this possible to check wrong captcha validation with your code.

Dave January 29, 2015 at 9:38 am 33

@Nimesh: no, I don’t believe that’s possible.

Nimesh January 29, 2015 at 8:04 pm 34

ok no problem, and again thanks for this validation help.

Dave February 9, 2015 at 8:25 pm 35

I’ve updated the code so it uses the latest versions of jQuery and jQuery Validate + modified the code so it does validation in real time.

If you do not want to validate in real time, simply remove the “onfocusout” section – then it will only validate after you press the “Post Comment” button.

pravin March 18, 2015 at 1:05 am 36


Techie April 17, 2015 at 12:30 pm 37

Super!!!! Thank you very much

Eduard April 21, 2015 at 9:32 pm 38

Great! so many thanks.

Neharika June 18, 2015 at 11:30 pm 39

Good. Keep it up.

Renu August 8, 2015 at 7:20 am 40


The above code works very well. But I need help in validating Mobile Number field. I have created a new field – Mobile. It has some regex format say /0,1[1-9]/. The above code you gave is not validating this newly created field. Can you help me to solve this?


Dave August 8, 2015 at 9:55 am 41

@renu – Something like this should work :

Find :
jQuery(document).ready(function($) {

Add After :
function(value, element, regexp) {
var check = false;
return this.optional(element) || regexp.test(value);
“Please check your input.”

Then use this to validate the phone number :
telephone: {
required: true,
regex : /^[\d\s]+$/,
minlength: 7

Halder September 29, 2015 at 3:07 am 42

I added, but its worked fine in Firefox but other browser it’s not over written. It work different in different browser. Is it depend on browser?

Dave September 29, 2015 at 9:50 am 43

@Halder – Which browser is it not working on for you? I just tried IE, FireFox, Chrome & Edge and it’s working fine here.

Debasish Halder October 2, 2015 at 12:18 am 44

I added it into functions.php file. But it’s not working any browser. What happen i don’t understand. Please Help me.

I change only errorElement: “div” to errorElement: “p”.

mlll October 9, 2015 at 3:19 pm 45

I added, but its worked fine in Firefox but other browser it’s not over written. It work different in different browser. Is it depend on browser?

Dave October 13, 2015 at 1:54 pm 46

@Debasish – why did you change the errorElement? It needs to be a “div” or things will get mis-aligned.

Dave October 13, 2015 at 1:55 pm 47

@mlll – no, it works in any browser. You probably need to clear your temporary internet files and refresh the page.

yaicu November 8, 2015 at 10:42 pm 48

It is amazing!! Thank you very much…

janki November 17, 2015 at 2:29 am 49

thanks its work for me ! its amazing.

rose19 December 21, 2015 at 6:33 pm 50

and the html…?

Dave December 21, 2015 at 6:36 pm 51

@rose19 – The entire code needed for this to work is listed at the top of this page.

rose19 December 21, 2015 at 6:51 pm 52

I paste the code at the top of this page into the function.php.. but what i’m writing in my form (html)?

Dave December 22, 2015 at 12:03 pm 53

@rose19 – You don’t write anything in your form, all this code belongs in your function.php file and css file (for styling).

Aroon 5 February 10, 2016 at 8:46 pm 54

Thanks Dave…it was very helpful..saved me a lot of time… gracias amigo..!!!

Leave a Comment