Getting Started

Getting Started The sample for this chapter is a login/registration page, which we will eventually plug in to our final sample application. This page will do one of two things: log in existing users or register new users. When new users arrive at the page, they will see a Register link at the top of the login form. When they click the Register link, the necessary form elements for registration will appear in the page, above the username and password form elements (see Figure 12.1). Figure 12.1. Our sample login form with optional, inline registration. While users begin filling out their user information, we will be checking their information against the existing information in the database to let them know if the information is already in use or present them with a visual identifier to inform them if they are in the clear. One way in which we are going to visually represent this information to the users is by changing the background color of the specific form element to red if it is already in use, or green if the element is valid. These visual identifiers obviously do not appear well in black and white, but the next identifiers will. They are simple string messages that state the status of the data next to the form element into which users are entering information, as shown in Figure 12.2. Figure 12.2. Validation provides visual feedback to users as they enter information. As you can see in Figure 12.2, we are not validating the first and last names. I chose to allow the same person to create a new account, as long as she uses a new email address and username (hence the reason we are validating these two fields). If we wanted to verify the first and last names, we would have to verify them together because there are a lot of people who share the same first name and sometimes the same last name. Another thing to be aware of is that we are running validation on the form elements only when the form is in registration mode. We only want to display feedback to users who are new to the application because we do not want to display verification on sensitive information that we are storing in the database. This form may look very simple, but there is quite a bit of logic to make it a smart form. We first have the actual login/registration page, which contains a JavaScript validation object and fires a validation call each time specified form elements are exited. Behind the front-end code is a PHP object that runs validation on a user database when our JavaScript validation object makes an XHR to it. As if that were not enough, we have an instance of the PHP object included in the login/registration page for logging in existing users and registering new users. This chapter will cover each aspect of this process, but focus primarily on where we use Ajax to connect the JavaScript object to the back end. Let's get started by creating the JavaScript validation object.