I currently have javascript validation set up on my form, (client side
validation) it checks to ensure certain fields are filled in.  I am
looking for code that will also change the colour of the fields the
script already validates if they are not compeleted.

It will work with the validation script I have already, so coupled
with the alert message that tells customers what fields they have
missed I also want those fields to turn red say.

Hello nyoung-ga

Without seeing the current coding of your page I will have to try to
give you a generic answer, should you require any further help at
integrating it into your site please ask for clarification and I will
do my best to respond promptly.

The easiest way to tackle this problem is to use style sheets.  In the
example below I have used the onFocus and onChange events to show you
how to alter the color of a form element:

<style>.changecolor {background: blue}.currentcolor {background:red}</style>
<form>
First Name: <input type="text" size="10" name="myname"
onFocus="this.className='currentcolor'"
onChange="this.className='changecolor'"><br>
</form>

Therefore in your script if the field is not filled in you simply need
to change the color of the form elements using your existing "if the
box is empty" statement.  An example of this can be seen below:

<style>.errorcolor {background: red}</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function valid(form) {
  var field = form.myname;  
  if (field.value=='') {
    alert("You must indicate your name.");
    field.className='errorcolor';
    return false;
  } 
  return true;
}
// -->
</SCRIPT>
<FORM METHOD="POST" onSubmit="return valid(this)">
Your name:<BR><INPUT TYPE="text" NAME="myname" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

Once again, if you require any further help on this please ask for
clarification and I will do my best to help quickly.  If you do
require further help it would be very helpful to see your current page
code and javascript script.

For further information there is an excellent article here that
discusses something similar to what you are trying to achieve:
http://www.xs4all.nl/~sbpoley/webmatters/formval.html

---

Request for Answer Clarification by nyoung-ga on 11 Oct 2004 11:46 PDT

Thank you for your prompt reply, I have had a go with what you have
sent and I realise now it would be best if I showed you the validate
code I have been using to date.

<script>
function validateForm() {
with (document.form1) {
var telNumber = (document.form1.HomeTel.value+document.form1.WorkTel.value+document.form1.Mobile.value)
var alertMsg = "Please provide the following information as we are
unable to issue a quote without it.\n";
if (FirstName.value == "") alertMsg += "\n - Your first name";
if (Surname.value == "") alertMsg += "\n - Your surname";
if (telNumber == "") alertMsg += "\n - A contact telephone number";
if (LoanRequired.value == "") alertMsg += "\n - The mortgage amount required";
if (Spare5.value == "") alertMsg += "\n - Please select 'yes' if you
consent to receiving a telephone call from Moneyquest regarding your
enquiry";
if (alertMsg != "Please provide the following information as we are
unable to issue a quote without it.\n") {
alert(alertMsg);
return false;
} else {
return true;
} } }
//-->
</script>

these fields detail above are the ones I need to turn a different
colour when the form is submitted with the missing data.

Thanks again

---

Clarification of Answer by palitoy-ga on 12 Oct 2004 02:43 PDT

Hello again,

This should work for you:

<SCRIPT LANGUAGE="JavaScript">
<!--
function valid(form) {
  if (form.FirstName.value=='') {
    alert("You must indicate your first name.");
    form.FirstName.style.backgroundColor='red';
    return false;
  }
  else { form.FirstName.style.backgroundColor=''; }  
  if (form.Surname.value=='') {
    alert("You must indicate your surname.");
    form.Surname.style.backgroundColor='red';
    return false;
  }
  else { form.Surname.style.backgroundColor=''; }
  if (form.telNumber.value=='') {
    alert("You must indicate your telephone number.");
    form.telNumber.style.backgroundColor='red';
    return false;
  }
  else { form.telNumber.style.backgroundColor=''; }
  if (form.LoanRequired.value=='') {
    alert("You must indicate the loan required.");
    form.LoanRequired.style.backgroundColor='red';
    return false;
  }
  else { form.LoanRequired.style.backgroundColor=''; }
  if (form.Spare5.value=='') {
    alert("You must indicate your 'Spare5'.");
    form.Spare5.style.backgroundColor='red';
    return false;
  }
  else { form.Spare5.style.backgroundColor=''; }
  return true;
}
// -->
</SCRIPT>
<FORM METHOD="POST" onSubmit="return valid(this)">
<INPUT TYPE="text" NAME="FirstName" />
<INPUT TYPE="text" NAME="Surname" />
<INPUT TYPE="text" NAME="telNumber" />
<INPUT TYPE="text" NAME="LoanRequired" />
<INPUT TYPE="text" NAME="Spare5" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

You will probably want to clean up the form to the style you require
(as you did not include this with your clarification).

Absolutely fantastic, works like a dream.  I now know my first stop
for javascript queries.  Thanks very much.

NYoung