CODEWITHSUNDEEP
javascriptcss
Aj_sari
Aj_sari

Reputation: 575

Label Error in css

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

Upvotes: 2

Views: 2553

Answers (2)

user13500
user13500

Reputation: 3856

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.

Upvotes: 1

logikal
logikal

Reputation: 1141

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

Upvotes: 0

Related Questions