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.phpNow, 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:
<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;
}
.jpg)
0 comments:
Post a Comment