Qcybb

We are here to help you solve your problems!

You are here: Home / WordPress / Comment Form Validation for WordPress

Comment Form Validation for WordPress

75 Comments

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="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#commentform').validate({

onfocusout: function(element) {
	this.element(element);
},

rules: {
	author: {
		required: true,
		minlength: 2,
		normalizer: function(value) { return $.trim(value); }
	},

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

	comment: {
		required: true,
		minlength: 20,
		normalizer: function(value) { return $.trim(value); }
	}
},

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 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 “normalizer” option in the rules section is used to trim any whitespace from the user input. This way, for example, (20) white spaces for a comment won’t validate.

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 :

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

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 Microsoft Edge, 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!

Comments

  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 …

    Reply to this Comment

  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.

    Reply to this Comment

  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!

    Reply to this Comment

  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.

    Reply to this Comment

  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.

    Reply to this Comment

  32. Hi,
    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.
    thanks

    Reply to this Comment

    • sorry if I’m too late to reply, just wanted to know how did you do this? I’m trying to find this solution for my site.

      I try with this code ;

      rules: {
      “recaptcha-checkbox”: {
      required: true,
      minlength: 1
      }
      }

      messages: {
      “recaptcha-checkbox”: “check the recaptcha box”
      },

      But didn’t work, still displaying to a new page whenever someone did not check the checkbox.

  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.

    Reply to this Comment

  40. Hi,

    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?

    Thanks

    Reply to this Comment

  41. @renu – Something like this should work :

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

    Add After :
    $.validator.addMethod(
    “regex”,
    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
    },

    Reply to this Comment

  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”.

    Reply to this Comment

  57. Thank you for sharing this! I spent hours trying other suggestions, but some didn’t do quite what I wanted, and others didn’t work at all. A more knowledgeable person probably could have made them work, but I needed a solution that worked without much tinkering on my part. This one is perfect, and no tinkering was required at all!

    Reply to this Comment

    • It seems I spoke a little too soon. The validation works great, but I will need to do a little tinkering. Now the background color of the form shows for just a split second in the input fields, too. Also, there’s a small jump when the error message goes away as the user is typing. Still, this validation is lightyears better than WordPress’s ugly error page.

  58. Thank you so much for the offer, but it turns out that the background issue wasn’t related to your code. It does it at certain times, and I just hadn’t noticed it before. Sorry for the false alarm.

    Reply to this Comment

  61. Thank you very much. But how to check also if the form checkbox of wp-comment-cookies-consent is checked? The code below don’t work, am I missing something?

    wp-comment-cookies-consent: {
    required: true,
    },

    Reply to this Comment

    • Hi Max,

      Any class or id’s that contain non-alphanumeric characters needs to be enclosed with quotes.

      “wp-comment-cookies-consent”: {
      required: true,
      minlength: 1
      },

      and

      messages: {
      author: “Please enter in your name.”,
      email: “Please enter a valid email address.”,
      comment: “Message box can’t be empty!”,
      “wp-comment-cookies-consent”: “You must consent to our cookie!”
      },

      Hope this helps!

  62. THANK YOU for this, spent hours trying to find a working solution for my site. This one works beautiful on my site.

    I got a question though, I just recently adding recaptcha v2 to my comment form, but when the checkbox is not checked, the error message display on a new page (the same error message page as comment validation before using this code).

    How do I make/modified this code to also display recaptcha error message below recaptcha badge?

    Again, thank you for this amazing code.

    Reply to this Comment

    • I’m not sure it can be done. I don’t use recaptcha on this website.

      I saw you replied to someone else as well, and my suggestion is to try using your code – but use the ID of the checkbox “recaptcha-anchor” instead of the class name “recaptcha-checkbox” and see if that works for you.

    • Thank you for the reply. I tried using “recaptcha-anchor” and several parents id’s, but none of them works.

      Maybe you’re right, i can’t be done. But thanks anyway, maybe someday if you figure out how to accomplish that, let me know. Again, thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *