USERS INCREASINGLY EXPECT SITES TO BE USER_FRIENDLY. JQUERY LETS US PROVIDE RICH VISUAL FEEDBACK AND VALIDATION WITH MINIMUM EFFORT.

Click here to download all files for this tutorial http://www.webdesignermag.co.uk/?page_id=83

Adding client_side validation to your web forms can improve the usability of your application or website significantly. While this isn’t a substitute for proper server-side validation (because users can opt to disable JavaScript on their browsers), you can significantly enrich the user experience and greatly improve the successful form submission rate. Keeping in mind that the form should continue to be usable and functional regardless of whether JavaScript is available or not, by using a framework such as jQuery we can take a styled form with regular HTML, selectively pick up hooks and use them to validate user entry, and then present the results through a nice visual feedback mechanism. In this tutorial, we’re going to look at one aspect of achieving this. We’re going to start off with a typical, fully styled account sign-up form. We’ll add extra div containers for feedback and pointers, animate them in and out of view as the user moves through the form. Finally, we’ll use regular expressions to validate the fields as the user completes them.

01 Download and install jQuery into your page

Locate the HTML and CSS files and folders on the Web Designer disc, copy them to your hard drive and open up ‘start.html’ in Dreamweaver. In your browser, navigate to the jQuery website (www.jquery.com) and download the latest release of the library. Save it into the scripts folder, and add the code below inside the tags to include the library in your HTML page. Note that your jQuery file may be called something else if the library has been updated since the time of writing.

Pages: 1 2