Changing text field bgcolor on Validate 1

rshandy · Jun 9, 2005

I want to be able to change the background color of the text field within a form validate - I can't seem to get it to work

I tried a few different ways with not much sucess...

Here's the code:

function validateForm(f) {

if (f.sirname.value.length < 1) {
document.getElementById("sir_Name1").setAttribute('background', "#FFFF10");
document.getElementById("sir_Name1").value="type in first name";

}

OR

if (f.sirname.value.length < 1) {
document.forms["billShip"].elements["sir_Name1"].setAttribute="background:FFFF10";
document.forms["billShip"].elements["sir_Name1"].value="type in first name";
}

I also tried using "style" but came up with an error.

Here's the form code:

<form action="form_results.pl" name="billShip" onSubmit="return validateForm(this)" method="post">

<input class="Arial10Regular" type=text name="sirname" size=25 maxlength=50 id="sir_Name1" style="background:#FF0000;">

</form>

Please help.

Thanks,

Rich

kaht · Jun 9, 2005

Here's a small sample that turns the field yellow if you try to submit w/o filling it out first:

Code:

<script language=javascript>
function validate() {
   txtbox = document.getElementById('txt');
   if (txtbox.value.length == 0) {
      txtbox.style.backgroundColor = '#ffff00';
      txtbox.value = 'Fill me out';
      return false;
   }
   return true;
}
</script>
<body>
<form onsubmit='return validate()'>
<input type=text id=txt><br>
<input type=submit value='Submit'>
</form>

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

rshandy · Jun 9, 2005

Thanks Kaht:

That seems to work well. Now, how would I expand this for multiple text box validations.

I would like the box to change color for all fields that are empty or don't have the right format (i.e. email address).

In addition, if a user fills out the text box correctly and still has some not filled in, how would I change the filled boxes back to the default color while leaving the unfilled boxes in yellow?

Rich

rshandy · Jun 9, 2005

Hey Kaht:

I've to expound on what you gave. I got it to work with multiple text fields but, I'm having trouble getting the return function to work all together.

For example if I use 3 fields, the first 2 work fine enabling me to have the text field's background color change between white and yellow, depending on whether text is present.

The 3rd field however, overides the other 2.

function validate() {
txtbox = document.getElementById('sir_Name1');
if (txtbox.value.length == 0) {
txtbox.style.backgroundColor = '#ffff00';

}else {
txtbox.style.backgroundColor = '#ffffff';
}
txtbox = document.getElementById('lname');
if (txtbox.value.length == 0) {
txtbox.style.backgroundColor = '#ffff00';

}else {
txtbox.style.backgroundColor = '#ffffff';
}
txtbox = document.getElementById('BillStreet1');
if (txtbox.value.length == 0) {
txtbox.style.backgroundColor = '#ffff00';
return false;
}else {
txtbox.style.backgroundColor = '#ffffff';

}
return true;

}

Any suggestions?

Rich

kaht · Jun 9, 2005

It's because you're only returning false if the last box checked is not filled out. Look above in the code you posted, the only return false is if this criteria is met:

Code:

 txtbox = document.getElementById('BillStreet1');   
   if (txtbox.value.length == 0) {
      txtbox.style.backgroundColor = '#ffff00';
      return false;
   }

That means that as long as the last textbox has a value supplied, then the function will always return true (even if the first 2 textboxes contain no data)

Now.... you could return false after each conditional, but then you would run into the problem that only one field would turn yellow at a time when trying to submit. For instance, if all 3 fields were left empty and you click submit then only field 1 would turn yellow - you fill out field 1 and click submit and then only field 2 turns yellow, etc.... I'm guessing you want all empty fields to turn yellow when the user attempts to submit. If this is the case, try out this code instead. I didn't test it but it should work:

Code:

function validate() {
   [COLOR=red][b]var returnValue = true[/b][/color];
   txtbox = document.getElementById('sir_Name1');
   if (txtbox.value.length == 0) {
      txtbox.style.backgroundColor = '#ffff00';
      [COLOR=red][b]returnValue = false[/b][/color];
   } else {
      txtbox.style.backgroundColor = '#ffffff';
   }
   txtbox = document.getElementById('lname');
   if (txtbox.value.length == 0) {
      txtbox.style.backgroundColor = '#ffff00';
      [COLOR=red][b]returnValue = false[/b][/color];
   } else {
      txtbox.style.backgroundColor = '#ffffff';
   }
   txtbox = document.getElementById('BillStreet1');   
   if (txtbox.value.length == 0) {
      txtbox.style.backgroundColor = '#ffff00';
      [COLOR=red][b]returnValue = false[/b][/color];
   } else {
      txtbox.style.backgroundColor = '#ffffff';
   }
   return [COLOR=red][b]returnValue[/b][/color];
}

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

rshandy · Jun 9, 2005

Hey Kaht:

Thanks so much for getting me going...

I got it working now with 3 text fields - just wondering if there's are more concise way than what I came up with....

function validate() {
var text1=document.getElementById('sir_Name1').value.length;
var text2=document.getElementById('lname').value.length;
var text3=document.getElementById('BillStreet1').value.length;

if (text1==0 || text2==0 || text3==0) {
alert('text1 does not equal 0');
txtbox = document.getElementById('sir_Name1');
if (txtbox.value.length == 0) {
txtbox.style.backgroundColor = '#ffff00';

}else {
txtbox.style.backgroundColor = '#ffffff';
}
txtbox = document.getElementById('lname');
if (txtbox.value.length == 0) {
txtbox.style.backgroundColor = '#ffff00';

}else {
txtbox.style.backgroundColor = '#ffffff';
}
txtbox = document.getElementById('BillStreet1');
if (txtbox.value.length == 0) {
txtbox.style.backgroundColor = '#ffff00';

}else {
txtbox.style.backgroundColor = '#ffffff';

}
return false;
}else {
return true;
}

}

Thanks again

Rich

rshandy · Jun 9, 2005

Woops!

We've seemed to "cross post". I'll check you revised code and get let you know how I made out.

Rich

rshandy · Jun 9, 2005

Great Stuff!

Worked like a champ. I'm now putting together the rest of the form's functionality...

Another question if may. My form button is on the bottom of the page. Is it possible to "anchor" the top of the page?; and if theres' fields missing to go the top of the page - this way the users will be able to see the beginning of the form.

Thanks.

Rich

kaht · Jun 10, 2005

Use the .focus() method on any of the textboxes and it should jump the text fields into the visible area of the screen. If that's not a viable solution lemme know and I'll give you another that's requires a little more code.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

rshandy · Jun 13, 2005

for some reason, my reply didn't post. I used the focus() feature on our search box which is higher on the page. Its works but its a little goofy for the cursor to end up in a different form.

If you could post your alernative code, I would greatly appreciate it.

Thanks,

Rich

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Changing text field bgcolor on Validate 1

rshandy

Technical User

kaht

Programmer

rshandy

Technical User

rshandy

Technical User

kaht

Programmer

rshandy

Technical User

rshandy

Technical User

rshandy

Technical User

kaht

Programmer

rshandy

Technical User

Similar threads

Part and Inventory Search

Sponsor