Wordpress 3.0 jQuery - part 17 potx

Then, in the cforms administration panel for my Registration form, we can now add the {Event} variable to the Event field that I added to the lib_aux.php page in the plugin.. When the fo

Then, in the cforms administration panel for my Registration form, we can now add

the {Event} variable to the Event field that I added to the lib_aux.php page in the plugin Let's also make sure the field is set to "read only"

Just for clarity, I'd like the event name to show up in the header of the form as well The header is not part of cforms, but part of the page template In my theme directory, I'll open up registration-page.php and next to the header's the_title() template tag on line 41, I'll add the following code:

<h2><?php the_title(); ?> for: <?php $evnt = esc_attr($_GET['evnt']);

echo $evnt;?></h2>

When the form launches, you'll now see the name of the event in the header and in the Event field, which is set to read only and not editable by the user Now when the form is submitted and e-mailed to the administrator, it's clear what event the registration is for

We now have an Event page that shows the user's upcoming events and lets them seamlessly register for those in a form that loads in a modal window as planned Great job! Let's see about making this experience even better

Part 2: Form validation—make sure that what's submitted is right

The great news is, cformsII provides nifty, awesomely CSS styled, server-side

validation already built-in and ready to go You can see if I click on Submit on my

form without filling out the required details, or an improperly formatted e-mail address, the form reloads showing me the fields that are incorrect

But why wait until the user clicks on the Submit button? While server-side

validation is essential and the only way to properly validate data, by adding in a little client-side validation, with jQuery, we can easily enhance and speed up the

user's process by alerting them as they work through the form that they're missing details or have data improperly formatted

Why is server-side validation important?

Client-side validation with JavaScript and jQuery should never be relied

on for data validation or to prevent improperly formatted information

from being submitted and sent to the server Users can always disable

JavaScript in their browser and then submit any values they want

(sometimes using improperly formatted values to hack into your server

through the form) Client-side validation, for this reason, should only be used to enhance the user's experience and not actually protect the server

or data integrity

The trick to client-side validation: Don't just tell them when it's wrong!

Everyone responds to positive feedback Instead of waiting for your users to mess up

or forget a field, with the use of jQuery and a few styles you can let them know that they filled the field out correctly and are ready to move on

Using Inkscape, I've made a simple little "check" and "x" set of icons that can be applied as a background image to a span added by jQuery Using the CSS sprite image technique of adjusting the background position to display the "check" or the

"x" icons, the user will visually see quickly if the form field is correctly filled out and that it's OK to move on

Blank input validation

In order to set up this basic validation, we'll write up a jQuery script that selects for the input items and on blur, sets off a function Let's place the script in the registration-page.php just below the loop code, above the wp-footer() hook,

as shown (note the bold comments in the code to follow along with what each jQuery statement does):

jQuery(".cform :input").blur(function(){

/*this "if" makes sure we don't target the submit button or email

field*/

if (jQuery(this).val() != "Submit") {

/*this "if" targets only empty fields*/

if (jQuery(this).val().length == 0) {

jQuery(this).after('<span class="wrong"> ! </span>');

}else{

/*"else" otherwise field is fine*/

jQuery(this).after('<span class="correct"> thanks </span>');

}//end if no length

}//end ifelse !submit

});//end blur function

The previous code appends an exclamation point (!) for an invalid, empty field,

or a quick thanks for a valid, filled-out one However, as the user focuses and blurs the input fields, the spans keep getting appended with the after function To compensate for that, we'll add a custom script that works on focus, just underneath our blur script It will remove the after appended spans as shown:

jQuery(".cform :input").focus(function(){

jQuery(this).next("span").remove();

});//end focus function

This gives us some very nice, basic validation that checks for blank inputs You'll note that our span tags have classes amended to them I've added the "check" and "x" images to my theme's image directory, and now, at the very bottom of my theme's style.css stylesheet, I'll add the following class rules:

/*for registration form*/

.wrong{

display:block;

float:right;

margin-right: 120px;

height: 20px;

width: 20px;

background: url(images/form-icons.png) no-repeat 0 -20px;

text-indent: -3000px;

}

.correct{

display:block;

float:right;

margin-right: 120px;

height: 20px;

width: 20px;

background: url(images/form-icons.png) no-repeat 0 0;

text-indent: -3000px;

}

The end result is a pretty nice, obvious visual display of what happens when you mouse or tab through the fields, but leave the two required fields blank, before

ever clicking on the Submit button.

Properly formatted e-mail validation

Let's just take this one small step further It's one thing to leave the e-mail address blank, but we might as well point out if it's not well formed Steve Reynolds, has an excellent how-to post on his site about using jQuery to validate an e-mail address You can read up on it here: http://www.reynoldsftw.com/2009/03/live-email-validation-with-jquery/

Steve's code demonstration is particularly interesting and worth a look at, as he uses jQuery's keyup function to check validation against the e-mail expression

in real time

For our purposes, we'll be borrowing Steve's regular expression function and fitting

it into the validation check we've already started, which works on the blur function

First up, below our existing script, we'll add in Steve's isValidEmailAddress function as follows:

function isValidEmailAddress(emailAddress) {

var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\ w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w- ]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0- 9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); return pattern.test(emailAddress);

}//is valid e-mail

Next, we'll take a close look at our existing script What we want to do, is after checking for a value of nothing (val().length == 0), we'll double-check that the input field is not the email field

Using Firefox and Firebug, I explored the DOM and discovered that the email field form has a unique class named as fldemail

We'll place our new statement as an extension of our current if statement with an else if statement before our general else statement

Our updated blur script now looks like this (note the new email validation, if else statement in bold):

jQuery(".cform :input").blur(function(){

/*this if makes sure we don't target the submit button or email field*/

if (jQuery(this).val() != "Submit") {

/*this "if" targets empty fields*/

if (jQuery(this).val().length == 0) {

jQuery(this).after('<span class="wrong"> ! </span>');

/*This "else if" targets if the field is the email field*/

}else if(jQuery(this).hasClass("fldemail") == true){

var email = jQuery(this).val();

/*Run's Steve's function and return true or false*/

if(isValidEmailAddress(email)){

//This shows the user the form is valid

jQuery(this).after(

'<span class="correct"> thanks </span>');

}else{

//This shows the user the form is invalid

jQuery(this).after('<span class="wrong"> ! </span>');

}//if else

//end email check

}else{

/*otherwise field is fine*/

jQuery(this).after('<span class="correct"> thanks </span>'); }//end if no length

}//end if else !submit

});//end blur function

We can now not only check for empty fields, but also check for a valid e-mail address

on blur of a field input:

Validation tip: don't go overboard!

The cforms II plugin server-side validation is more than adequate Again, we're just trying to speed things along with a little client-side validation, and not frustrate our users because we've created a bunch of strict

formatting rules for data Some people may have phone numbers, or zip codes that are a little differently formatted than you would expect, and for most intents and purposes, this is OK Your best bet is to use your jQuery validation to prompt hints and inline help and guide the user, rather than force them to comply with exact data formatting

Final thoughts and project wrap up:

It's all about graceful degrading

As with everything you do with jQuery, you need to keep in mind that you're creating useful enhancements that are great to have, but if for some reason a user didn't have JavaScript enabled or available, the process or site won't break

Our client is very happy with our seamless registration solution Going through the registration process with JavaScript disabled, the registration process does work just fine using the standard browser back keys The only drawback I find is that the

registration form loads up outside of the WordPress theme, which is what we had

to do so it would load in nicely into the ColorBox modal window

On the whole, I don't think this is that big of a problem Going through my various website stats, I'm hard-pressed to find a visitor who didn't have JavaScript enabled The two or three who didn't were probably in text-only browsers, so a lack of WordPress theming would probably not be noticed at all (in fact, it's probably nice for disabled users using text-to-speech browsers, not having to wade through the header info to get to the form)

Because we're always thinking of hypotheticals in this title, if by some chance, the client ever decided they'd like the form to work outside of ColorBox within the WordPress template in the event JavaScript was disabled, I've come up with the following solution:

First, you'd need to load the form into two WordPress pages One named register,

as we've done with the special template and another one named register-b (that's

just the permalink slug, the header could still say Register on both pages) For the

register-b page, you would not assign the special template; you'd leave the Page Template as Default Template You can place a cform on to as many pages and

posts as you like, so having this form in two places definitely won't be a problem

Next, you'll go into the category-3.php Events template page and change the link

to call the alternative, default themed page as follows (note the bold -b is the only difference from our original link):

<p><a class="register" href="/wp-jqury/register-b/?evnt=<?php the_

title(); ?>">Register</a></p>

Last, in your custom-jquery.js file, you'll simply create a jQuery script that will rewrite that href link to the modal page form by removing the -b Be sure to place

this script before your colorBox function scripts, just to make sure the href transforms before setting up the colorBox functions

jQuery("a[href*='register']").each(function(){

this.src = this.src.replace(/register\-b/, "/register/");

});

If JavaScript is enabled, jQuery will change all the register href instances and the whole process will flow as planned using the ColorBox plugin If not, the user will register using the standard WordPress theme form and not be any-the-wiser

As you can see in the following screenshot, the form would just load in as part of the site if JavaScript were disabled: