Visual Form Feedback
In modern applications visual feedback is just as important as the application itself. With the Ajax boom we’re having a revolution of those nice immediate feedbacks in web applications.
To demonstrate what the little script does, here an example: enter something in the textbox below.
Just click on the buttons to see the effect.
So what does the script do? It inserts a span with the “status”-class directly after the input field. Once we have the status span we can then put the HTML that we want in it. Additionally we set the background color to either red, yellow or green, depending of the state.
var Feedback = {
setError: function(element){
element.style.background = '#FFDDDD';
this.getStatusFromField(element).innerHTML = "<img src='images/error.png'/>";
},
setValid: function(element){
element.style.background = "#DDFFDD";
this.getStatusFromField(element).innerHTML = "<img src='images/ok.png'/>";
},
setValidating: function(element){
element.style.background = "#FFFFAA";
this.getStatusFromField(element).innerHTML = "<img src='images/indicator.gif'/>";
},
/**
* Used to create or get the reference to the status box for a certain
* field.
*/
getStatusFromField: function(field){
var f = field.nextSibling;
if(f == null || f.class != "status"){
var status = document.createElement("span");
status.class = "status";
var parentDiv = field.parentNode;
parentDiv.insertBefore(status, field.nextSibling);
return status;
}else{
return f;
}
}
};
Download the full source of the Script.This is just a little time filler between the tutorial parts, so check back soon 
