This article will teach you how to add from validation to your WordPress Comment using jQuery. For those who don’t know what jQuery is, jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. You will find jQuery validation plugin and the latest jQuery library here.
Upload jQuery Files and Load Files
To use the library we need to upload it to your WordPress template directory. To keep file separate from normal php file lets put these files in “js” folder into your theme directory. So the location will be “/wp-content/themes/theme-name/js” directory. For loading the jQuery files we need to add some code in the header.php file inside the <head></head> tags. We will find the virtual template directory using the bloginfo(‘stylesheet_directory’) function.
<script src="<?phpbloginfo('stylesheet_directory'); ?>/js/jquery-1.6.1.js" type="text/javascript"></script>
<script src="<?phpbloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js"" type="text/javascript"></script>
Now these files will be loaded on every page and it can be used directly.
Editing comments.php
Next, we need to edit the comment form, which can be found in the comments.php file in the template directory. Open the file using your favorite editor and put the following code into the file for the comments form.
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<div><input type="text" name="full_name" id="visitor " value="" size="30" tabindex="1" />
<label for="full_name"><b>Name (required)</b></label></div>
<div><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label></div>
<div><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<div><input name="submit" type="submit" id="submit" tabindex="5" value="Post Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $ID; ?>" />
</div>
<?phpdo_action('comment_form', $post->ID); ?>
</form>
Adding Validation
In order to add the validation to the code, we need to use the following methods:
- Required as class if the field is required field. Makes the element always required.
- Email as class if the field is email field. Makes the element require a valid email
- Minlength as attribute of the field. Makes the element require a given minimum length.
- Maxlength as attribute of the field. Makes the element require a given maximum length.
For more validation rules, see the documentation page of jQuery validation plugin.
If you want the name field to be required and a minimum of 3 characters required in that field then the input tag will be:
<div> <input type="text" name="full_name" id="full_name" value="" size="30" tabindex="1" minlength="3"/> <label for="full_name"><b> Name (required) </b></label> </div>
For the email field, the HTML code will be:
<div> <input type="text" name="email" id="email" value="" size="22" tabindex="2" /> <label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label> </div>
Final comment form code is:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="comment_form">
<div>
<input type="text" name="full_name" id="full_name" value="" class="required" size="30" tabindex="1" minlength="3"/>
<label for="full_name"><b> Name (required) </b></label>
</div>
<div>
<input type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label>
</div>
<div>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
</div>
<div>
<input name="submit" type="submit" id="submit" tabindex="5" value="Post Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $ID; ?>" />
</div>
<?phpdo_action('comment_form', $post->ID); ?>
</form>
You also need to add the following JavaScript code to the footer or the header section of your template.
<script>
$(document).ready(function(){
$("#comment_form").validate();
});
</script>
Summary
That’s it. Your comment form is ready to dynamically validate the name, email and comment text area fields. Please let me know if you enjoyed this post! If you’d like to see more WordPress guides on the site, leave a comment!