DirectedInsight
  Home | Javascript | ASP | Database | Solutions | Misc.
NEWEST
Different ways to show the user they're wrong.
Helpful
Some simple queries that can save you some research time
NEWER
Complete AJAX example.
COOL
Dynamic file upload fields

small DI oval Invalid Field Indicators Part 3

Both the first and second pages in this series gave some examples of things you could do to let the user know they didn't do things quite right. This third page while being something you could do is also something you may not really want to do - validating each field as the user leaves it.

small DI oval As they type validation

Image of field highlighting error. Image of field highlighting error. Image of field highlighting error.

You can use any of the previously mentioned methods for letting the user know something was entered wrong, it is just done for each field as the user gets done with it. The best, if there is a best, way would be onblur for the field, sure you could use onkeyup or down but that would take the concept of irritating to a whole new level.

To do this I updated each element in the form by adding an onblur handler and calling the validateElement function directly: 

<input type="text" name="fullName" id="fullName" onblur="validateElement(this, 'text', 'full name');" >

My validateElement function had to be changed to include the calls to the setRequiredWarning function. My function is below, you'll notice it always finds the entry to be invalid - I did that for demo purposes here, your code, I hope, would be a bit more forgiving. 

function validateElement(theElement, elementType, elementDesc){
    var errMsg = "";
    switch (elementType) {
        case "text":
            errMsg = "The " + elementDesc + " field must have an entry.";
            break;
        case "phone":
            errMsg = "Your " + elementDesc + " must be in the format nnn-nnn-nnnn.";
            break;
        case "email":
            errMsg = "Your " + elementDesc + " must be in the format \"name@domain.ext\".";
            break;
        case "select":
            errMsg = "You have to select a location from the list.";
            break;
        case "radio":
            errMsg = "You have to choose one of the preferences.";
            break;
    }

    if (errMsg != ""){
        setRequiredWarning(theElement.name, true, "");
        alert(errMsg);
    } else {
        setRequiredWarning(theElement.name, false, "");
    }
    return true;
}

Probably the most frustrating thing for the user about this method would be the constant alerts or notices that would keep interferring with their progress on the page. Some users may choose to skip certain fields and come back to them, being told that they skipped it will just make them angry. And if you're using Ajax to do some sort of validation against a database then all your doing is wasting resources in going back and forth to tell the user something they already know.

I hope something in this series was helpful or at least slightly enlightening to you, if so I'd love to hear about it, and if not or if you think something should have been added I'd like to hear that too. Send me an email with just a comment or if you have an addition you think should be added send it to me and we can probably get it added.

If you have a question, comment, bug fix, or addition let us know. We'll add it to the demo with the proper credit. Just drop us an email at comments@directedinsight.com

small DI oval