Subreption blog

Sat, 17 Nov 2007

Design-ish forms with live validation

One of the most important features of our content management system is its usability and careful design. We faced a complicated issue with forms: it's not that uncommon to use tables for a fluid layout, easy to customize using CSS. The typical table-less solution involves using floating labels to the left, with fixed width, and input fields to the right. We've seen designs where a help text could be neatly displayed right next to the input, using tables.

Always perform server-side validation and don't require JavaScript in forms!

This allows support in possibly every web browser out there, without compatibility issues. The code looks clean too.Another feature that boosts the usability of forms is live data input validation. For security reasons, you should never rely on client-side validation, but it comes as an extremely useful aid for showing the user if there's anything wrongly formatted that requires fixing, before wasting time submitting the form. A table layout based form with help

We came across LiveValidation (quite an appropriate name), a neat Prototype-compatible JavaScript library for automating data validation. It's free ( MIT license, for personal and commercial projects) and compatible with every major browser we've tested.

LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields

An example:

var fullName     = new LiveValidation('contact_full_name', {validMessage:"OK"});
var companyName  = new LiveValidation('contact_company', {validMessage:"Thank you!"});
var emailAddress = new LiveValidation('contact_email', {validMessage:"OK"});
var theReferrer  = new LiveValidation('contact_referrer', {validMessage:"Thank you!"});
var theWebsite   = new LiveValidation('contact_website', {validMessage:"Thank you!"});
var phoneNumber  = new LiveValidation('contact_phone', {validMessage:"Thank you!"});fullName.add(Validate.Presence);
validateName(fullName);
validateName(companyName);
validateEmail(emailAddress);
validatePhone(phoneNumber);
validateUri(theWebsite);

You will notice the presence of some functions that don't come from LiveValidation. Those are some wrappers that we have included in our JavaScript code for avoiding code bloat. We needed validation of URI input and phone numbers:

var RegexpURI     = /((www|http)(\W+\S+[^).,:;?\]\} \r\n$]+))/i;
var RegexpPhone   = /(\+)?([-\._\(\) ]?[\d]{3,20}[-\._\(\) ]?){2,10}/;(...)

function validateEmail(e) {
 e.add(Validate.Presence);
 e.add(Validate.Email);
}

function validateUri(uri) {
 uri.add(Validate.Format, { pattern: RegexpURI,
        failureMessage: "Must be a valid URI!"

    });
}

function validatePhone(phone) {
 phone.add(Validate.Format, { pattern: RegexpPhone,
        failureMessage: "Must be a valid phone number (ex. +123-45678-908)!"
    });
}

Nice? Check out the documentation and download the library.

Published on: Sat, 17 Nov 2007. | Path: /design | Permalink

Subreption blog

Sat, 17 Nov 2007

Design-ish forms with live validation

Navigation

Archives

Syndication

Links

Meta

License