SETTING UP THE JQUERY VALIDATION AND REGISTRATION FUNCTIONS

} break;

With the PHP file ready to go, it is time to build the jQuery AJAX functions.

SETTING UP THE JQUERY VALIDATION AND REGISTRATION FUNCTIONS

Checking the new user name should be as seamless as possible for the registrant.

The form should provide immediate feedback to users and prompt them to make changes to their information prior to the form being submitted. The form input (in chap4/4-1.php) element for the user name will be bound to the blur method:

<label class=”labelLong” for=”penewuser”>Please choose a user name:

p </label><input type="text" name="penewuser" id="penewuser”

p size=”24” /><span class="error">name taken, please choose p another</span>

1. Bind the form input for the user name to jQuery’s blur method:

$(‘#penewuser’).blur(function() {

2. Capture the value of the user name in the newName variable:

var newName = $(this).val();

Next, you’ll validate with the post method.

NOTE: For more on PHP and how to use it effectively with MySQL, check out Larry Ullman’s book, PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide (Peachpit, 2008).

ptg 1. Call the post method with the URL of the PHP script, data representing the

name of the form that is being filled out, and the newName variable:

$.post(‘inc/peRegister.php’, { formName: ‘register’, penewuser: newName

Note that the data passed by the post method is in name: value pairs. The value in each pair is quoted when sending the raw data. Variables such as newName do not need the quotes.

The results of calling the inc/peRegister.php script will automatically be stored for later processing in the data variable.

2. Define the callback for the post function and pass the data variable to the function, so that the results can be processed:

}, function(data){

The PHP function returns only the row count based on the query that was used to see if the user name was in the database.

3. Set up a variable to hold the information returned in the data variable:

var usernameCount = data;

4. Create a conditional statement that will display or hide the error message based on the data returned by the AJAX method. You’ll recognize most of this conditional statement because it is similar to how validation error messages were delivered in Chapter 3:

if(1 == usernameCount){

$(‘#penewuser’).next(‘.error’).css(‘display’, p ‘inline’);

} else {

$(‘#penewuser’).next(‘.error’).css(‘display’, p ‘none’);

}

ptg 5. Close out the post function by citing the data type you expect the

server-side function to return:

}, ‘html’);

});

If the PHP function returns a 1, the error span is displayed, as illustrated in Figure 4.3.

The registration function needs to submit the user’s data or let the user know if there are still errors with the submission. If there are errors, the user needs to be prompted to fix the registration.

1. Start the registration function by binding the registration form to the submit method:

$(‘#registerForm’).submit(function(e) {

The variable e holds information about the event object, in this case the submit event.

2. Because you will be using AJAX to submit the form, you do not want the submit event to perform as it normally would. To stop that from happening, you set the event to preventDefault:

FIGURE 4.3 The user name FrankFarklestein is already in use by someone else. Who knew there were two of them?

ptg 3. Serialize the form data. The serializing creates a text string with standard

URL-encoded notation. For most forms, this notation is in the form of key=value pairs:

var formData = $(this).serialize();

4. Now you can invoke the jQuery AJAX post method by providing the URL to post to and the serialized form data, and setting up a callback function:

$.post(‘inc/peRegister.php’, formData, function(data) { The PHP code will return 0 if the query to add the user is successful. If not, it will return a higher number, indicating that the user could not be added.

5. Store the information returned by the AJAX function in the mysqlErrorNum variable:

var mysqlErrorNum = data;

If an error is returned, you’ll want to provide users with a prompt to let them know that they need to correct the information. The information is provided in a modal window as you have done before. Figure 4.4 shows the modal window that you will set up next.

6. Test the value of the variable mysqlErrorNum to set up a conditional statement:

if(mysqlErrorNum > 0){

FIGURE 4.4 The modal prompt letting users know that they need to correct their registration information. In the back-ground you can see that the user name is already taken; this must be changed.

ptg 7. IfmysqlErrorNum is greater than 0, append a modal window to the body

of the Web page:

$(‘body’).append(‘<div id=”re”

p class=”errorModal”><h3>There is an error with p your registration</h3><p>Please correct your p information and re-submit...</div>');

8. Calculate and apply the margins for the new modal window just as you did before:

var modalMarginTop = ($(‘#re’).height() + 60) / 2;

var modalMarginLeft = ($(‘#re’).width() + 60) / 2;

$(‘#re’).css({

‘margin-top’ : -modalMarginTop, ‘margin-left’ : -modalMarginLeft });

9. Add the code that will fade in the modal window:

$(‘#re’).fadeIn().prepend(‘<a href=”#”

p class="close_error"><img src=

p "grfx/close_button.png" class="close_button"

p title="Close Window" alt="Close" /></a>');

10. Provide a method to close the modal window containing the error warning:

$(‘a.close_error’).live(‘click’, function() { $(‘#re’).fadeOut(function() {

$(‘a.close_error, #re’).remove();

});

});

ptg 11. If no error was returned, fade out the registration window and clear the form:

} else {

$(‘#registerWindow, #modalShade’).

p fadeOut(function() {

$(‘#registerForm input[input*=”pe”]’).val(‘’);

});

}

12. Close the post method by providing the data type that you expect the PHP function to return:

}, ‘html’);

});