I currently have a form with textboxes that include validation. Everything works smoothly when clicking the save button for the first time, but if we fill out the textboxes and then remove the text, an error message is displayed on the textboxes. You can view this behavior in action here:
The CSS styling used for this form is as follows:
#field
{
margin-left: .5em;
float: right;
}
#field, label
{
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
br
{
clear: both;
}
input
{
border: 1px solid black;
margin-bottom: .5em;
width: 72px;
}
input.error
{
border: 1px solid red;
}
label.error
{
position:fixed;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
label.valid
{
position:absolute;
Background-image:url("../images/checked.gif") ;
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:top;
background-color:White;
border:none;
width:1px;
height: 16px;
}