WordPress Comment form validation

Hello, today I am showing how to validate comments fields in WordPress.
Comment is very important in blog post or custom pages.

How impact comment on website?

Comment is normally call feedback or suggestion of blog or post.

WordPress Comment Scenario

current scenario in comment section, when user fill the form and click on submit button, if all mandatory field is fill then comment form is submit, but any necessary field are miss then redirect to the error page so the user is distract here,

Comment Scenario in Programming language Like 😎😎 :

if( comment_fields != '' )
{
    echo 'Comment has been submitted';
}
else
{
    echo 'redirect to error page';

}

error page like below attachement.

so, now we are going to take look in custom jQuery code,

I have making custom jQuery code to stop error page redirection and show field required is same page.

Go to your active child theme or parent theme and open functions.php file and paste below code for enqueue the jQuery

If you are already enqueue script ignore this steps.

wp_enqueue_script('custom-min-jquery','//code.jquery.com/jquery-3.6.0.min.js');

Find out latest jQuery minified from here. Click here

Paste this code end of the footer.php or whatever you custom JS file.

<script type="text/javascript">
//comment form validation Start - hrtechpro
jQuery( "#commentform" ).submit(function( event ) 
{ 
 var check_login = jQuery('#commentform').find('.logged-in-as').hasClass('logged-in-as');

//check comment field is empty
//check if user is logged in

if(check_login == true)
{		
if(jQuery('.comment-form-comment #comment').val() == "")
{
 event.preventDefault();
jQuery('.comment-form-comment #comment').addClass('required-comment');	
jQuery('.required-comment').css('border','1px solid red');		  
    }	
   }

//check if user is logged out
if(check_login == false)
{
if(jQuery('.comment-form-comment #comment').val() == "" || jQuery('.comment-form-author #author').val() == "" || jQuery('.comment-form-email #email').val() == "")
{
  event.preventDefault();
 jQuery('.comment-form-comment #comment').addClass('required-comment');	
 jQuery('.comment-form-author #author').addClass('required-comment');	
 jQuery('.comment-form-email #email').addClass('required-comment');	
 jQuery('.required-comment').css('border','1px solid red');	
	}

	if(jQuery('.comment-form-comment #comment').val())
	jQuery('.comment-form-comment #comment').removeAttr('style');	
	}
	if(jQuery('.comment-form-author #author').val())
	{
	jQuery('.comment-form-author #author').removeAttr('style');
	}
//validate email first then submit
if(jQuery('.comment-form-email #email').val())
{
//get email field value
var user_email_valdiate = jQuery('.comment-form-email #email').val();
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

//validate email address	
var chek_validation = regex.test(user_email_valdiate);

//email is not valid then not redirect
if(chek_validation == false)
{
	  									if(jQuery('#commentform').find('.enter-valide-email').hasClass('enter-valide-email') == true){
	  										jQuery('#commentform').find('.enter-valide-email').remove();
	  	}	  											event.preventDefault();
	  											jQuery('.comment-form-email #email').after('<span style="color:red;font-size: 15px;" class="enter-valide-email">add valid email address</span>');
	  }else{ 									                                                             jQuery('.comment-form-email #email').removeAttr('style');	
	  }								
	}
    }
});
//comment form validation End - hrtechpro

save the file which one you have pasted the above code.

if your website have caching plugin so, please clear cache and check the comment form now validation applied to the form.

Some screenshot I have taken from my side:

Without Login taken screenshots

every single fields is required

Name andEmail is required

Email is required

Email Validation:

With Login taken screenshots

Comment Posted

If you have any suggestion or idea to improve us, please make comment below on comment section, always welcome your suggestions.

Contact us if you have any questions or suggestion, so we will improve us or make new initiative, for your queries we have ping back for the same as soon as possible.

If this article found you useful share it to those who are in need of this.

Sharing is caring.