Label Error in css

Question

I have a form of textboxes with validation.

It is working fine if we click the save button first time it showing correctly. But once if we fill the text boxes and then remove the text from text boxes it is error message is getting displayed on text boxes. please see this fiddle:

http://jsfiddle.net/9fYxb/2/

CSS:

#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;
}

Note that you also might want to look at `serialize()` etc. when you post the form data. For example look at how its is done here: http://stackoverflow.com/a/18265708/3278057 — user13500, Mar 25 '14 at 03:44

score 1 · Accepted Answer · answered Mar 25 '14 at 03:26

Do you need float left for #field and label?

 #field, label {
     float:left;
     font-family: Arial, Helvetica, sans-serif;
     font-size: small;
 }

If you remove that and also remove position form label error and label valid:

http://jsfiddle.net/kimiliini/8SM7f/

Also, you would probably want to fix the mobile number check. Your current:

/[789]\d{9}$/

Would validate

// This as OK
7111111111
// But this would also validate this as OK:
123155551333321212121521251215421212487884655487111111111

Try using:

/^[789]\d{9}$/

The ^ denotes start of string.

Background-image is also bad. The CSS property does not have capital B.

score 0 · Answer 2 · answered Mar 25 '14 at 03:26

Change your CSS for label.error from:

label.error
{
    position:absolute;
    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;
}

to:

label.error
{
    clear:both;
    float:right;
    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;
}

but be careful when using padding with a float - IE6 does weird things with it - not that people should be using that browser these days. — logikal, Mar 25 '14 at 03:28

Label Error in css

2 Answers2