Step 1 – Download jQuery & the Bassistance.de Validation Plugin
Just download jQuery from
jQuery.com On the first page you will directly
see “Download jQuery and a few different downloads. You can download the
“Minified
and Gzipped” version, this means it’s compressed.
Next we need the jQuery validation plugin, made by
bassistance.de.
This file contains a few Javascript files, but we only need
“jquery.validate.min.js” and compressed for this tutorial.
Step 2 – Uploading files
At this moment you should have 2 files, “jquery.validate.min.js” and
“jquery-1.9.1.min.js”, we are going to upload this to our WordPress theme
directory.
Because in this tutorial we are using the WordPress theme, literally called
“theme_name”, the folder we need is located in
/wp-content/themes/theme_name/.
To keep things organized we will create a new directory/folder called “js”,
this will be the folder with all the javascript. When you have the directory
created, upload the files to the folder we just created. (/wp-content/themes/theme_name/js)
Step 3 – Loading Javascript
Now that we have the javascript uploaded in our directory, we still have to
load it into our theme. The javascript should load between the <head>
</head> tags. The head tags are located in a php file, that’s located in
the theme directory.
So search for “header.php”, this is the file where the top of the theme code
is located. Now we have to make sure we add the javascript before these 2
lines:
<?php wp_head(); ?>
</head>
This is how we include a javascript file:
<script src="url/to/javascript" type="text/javascript"></script>
We want things to happen automatically, so it’s best if we use WordPress
tags. To display the URL to the template directory you can use this code:
<?php bloginfo('stylesheet_directory'); ?>
So in combination with the code to include the javascript, the final result
is:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js"" type="text/javascript"></script>
Now these 2 javascript files will be loaded at every page, and can be used
on all WordPress pages using this theme!
Step 4 – Activating Validation
Ok, now it’s time to activate the comment form validation, so go back into
the theme directory, and look for /wp-content/themes/theme_name/comments.php
Now, we only need to take a look at the form part of the code! The form
starts at line 73, and it looks like this:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="25" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="25" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
Now as you can see, the form has an ID element, it’s called “commentform”,
we need this name to activate the javascript.
Don’t close this file yet, first switch back to “header.php”, and add these
lines below the jquery.validate.min.js
<script type="text/javascript">
jQuery().ready(function() {
// validate the comment form when it is submitted
$("#commentform").validate();
});
</script>
As you can see, the ID of the form is in there, “#commentform” this
activates the validation for any form with the id commentform.
Now, when you submit a comment currently and you leave all fields blank it
does nothing, it still shows the default WordPress error. In the next step I
will show you how to start validation for each field.
Step 5 – Name field validation
Now we start the validation for each field. That’s mean going through
telling the validation javascript file what kind of validation is required. The
validation javascript is so easy to use; user only needs to enter a few special
words or character to start the validation. So let’s we’ll start off with the
first field, that’s the required name field, the field looks like this:
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
We want to make sure the commenter has filled in the field, and if possible
make sure at least 6 characters are entered. So simply add class=”important”.
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" class="important" />
<label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label></p>
If you hit submit without typing in your name you get “This field is
required.” Nice!! So what about if the user doesn’t enter a minimum number of
characters?
Well we can simply add that validation by adding minlength=”6″ to the field
options:
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" class="important " minlength="6" />
<label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label></p>
When you enter something (less then 6 characters) you will see a new message
shows up “Please enter at least 6 characters.”. So that works perfectly! Minimum
length allows you to set the minimum amount of characters, just replace the
number to what you think is necessary.
Step 6 – Mail field validation
Next we will validate the email field, so this is how the field looks like:
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="25" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
Now we do just the same as the previous step. Well that would be wrong,
because aside from the field simply being required, it also has to be a valid
email address. Now we know how to set it required by simply adding class=”
important”, but how to validate the email?
Just add “email”, so it becomes class=”required_email”, this makes it
required and checks for a valid email:
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" class="required email" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
If you try out the email field email, you will notice that it’s says “E-mail
address is required.” when submitted, that’s good! And now when you enter
something that is not this format: wop@wp.xab it will say “Please enter a valid
email address.” so that’s working perfect!
Step 7 – Website field validation
Now we are going to validate the website field? So we are going to validate
a URL, it’s just as very easy as previous validations:
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="25" tabindex="3" />
<label for="url"><small>Website</small></label></p>
At now you could set it required and set a minimum amount of characters. We want
a valid URL. We just add another class but this time we name it class=”web_url”:
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="25" tabindex="3" class="web_url" />
<label for="url"><small>Website</small></label></p>
As you can see it’s very easy thanks to jQuery and the Validation Plugin.
Step 8 – Comment field validation
I would like a minimum and a maximum amount of characters. But first let’s
check out the comment field:
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="6"></textarea></p>
We finished step 1, add the required class (class=”important”) to make sure
something is typed in the textarea. Now the minimum input text, you remember
right? (minlength=”") Now I think at least 6 words need to have been
typed. So that would be minlength=”6″, it’s still as easy as that. Now we want
to set a maximum. Well the plugin has a solution for that, instead of minimum length
just add maximum length plus the amount of words. We want 50 words are enough
so add maxlength=”50″.
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" class="important" minlength="6" maxlength="50" ></textarea></p>
When we submit the form empty is will say as all other fields “This field is
required.”, but if you enter less then 6 characters it says “Please enter at
least 6 characters.” and if you enter more then 50 it says “Please enter at
least 6 characters.
Step 9 – Form styling
Now we are going style everything so it looks nice and clean, but first I
would like to change the label position. As you can see right now, it first
shows the “input field” then the “error” and then the “field label”.
I think it should look like this “Field label”, “input field” and then the
“error”, to do this we only have to move the label above the html.
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" class="important" />
<label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label></p>
To:
<p><label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" /></p>
As you can see the only thing we did was move the <label> above the
<input>. When you now refresh your comments page you will see that the
text “Name (required) is moved infront of the input field.
So now repeat this step for all input fields, at the end it should look like
this:
Now as you can see, all fields have labels, except the comment field, I
think it should have a label. So just do the same, and place a label above the
input field:
<label for="comment"><small>Comment</small></label></p>
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
Now it’s time to open the theme CSS file. The CSS file for this theme can be
found in “/wp-content/themes/theme_name/style.css”.
Now we’ll make sure to type #commentform .classname, this makes sure only
fields between the <form></form> are affected.
#commentform label{
width: 200px;
float:left;
}
#commentform input, #commentform textarea{
border: 1px solid #dbd8d3;
width: 225px;
}
Step 10 – Error styling
Now when you hit submit you will see the error messages don’t look very nice.
So now we’ll create a good style for error message show.
<label class="error" generated="true" for="author">This field is required.</label>
#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda url('images/cancel.png') no-repeat left;
border:1px solid #dbdbd3;
width:209px;
margin-top:4px;
padding-left:20px;
}
