- A Complete(-ish) Login System Using jQuery
- Creating Basic Functionality
- Adding JavaScript Validation
- Applying Ajax
Adding JavaScript Validation
Adding JavaScript validation to the form-basic validation that an email address and password were provided-is thoroughly covered in the book’s chapter, but this article does a couple of things a bit differently, so I’ll walk through the key points here.
First, the page must include the jQuery library, which can be linked through Google’s framework APIs:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Next, create and include a separate JavaScript file, named login.js:
<script type="text/javascript" src="login.js" charset="utf-8"></script>
In login.js, you start by assigning an event handler to the login form’s submission, using this code:
$(function() { $('#loginForm').submit(function() { // Actual code here. } });
The first line begins an anonymous function that will be called when the document is ready (i.e., ready for event listeners to be added to the document’s various elements). This is just cryptic jQuery syntax, and is similar to this in standard JavaScript:
window.onload = function() { };
Within that anonymous function, an event listener is added on the form’s submission. When that event occurs, the code within the second, inner anonymous function will be executed. Note that in order for this to work, the form must have an id value of loginForm.
In terms of progressive enhancement, what’s happening here is that if the user’s browser is supported by jQuery, and if the browser is capable of triggering those events, the form’s submission will be hijacked by jQuery. If the user’s browser isn’t supported, including if JavaScript is disabled, the form’s submission will continue on to the PHP code as before.
The basic form validation just needs to confirm that data was entered into both inputs, and then return true, which would allow the form to be submitted to the server (the Ajax will be added next), or false, which would prevent the form’s submission so that the user can correct the mistakes. In the latter case, error messages and formatting should be added to the page as well.
There are a couple of ways of validating a text input; for simplicity here, the JavaScript will just confirm that each input is not empty. That code looks like this:
if ($('#email').val().length >= 6) {
First, jQuery grabs a reference to the email input using $('#email'). Then the val() method returns the value of that input, and the length property reflects the number of characters in that string value. Six characters is the minimum length for a valid email address (a@b.ws).
If this conditional is true, assign the value to a local variable for later use:
var email = $('#email').val();
You also need to remove any possible error messages:
$('#emailError').remove();
The need for this line is that when the validation conditional is false, a new span will be added to the email paragraph, just after the form element:
if (!$('#emailError').length) { $('#emailP').append(' <span class="error" id="emailError">Please enter your email address!</span>'); }
That code says, that if there is no element with an id of emailError, then new HTML, including an element with an id of emailError, should be appended to the email paragraph.
And that takes care of validating the email address input. The code would just need to be duplicated, with a few values changed, for the password (again, see the downloadable files).
The entire function could then return true if the variables have values and false otherwise:
if (email && password) { return true; } else { return false; }
Instead, the validation will be taken up a level, by invoking an Ajax call if the variables have values.