Form Validation Message

[Woody]

Hi all. I was wondering if anyone knows how to get the form validation messages to appear across the top of the form in red letters when a field is not filled in.I currently have an alert box which appears and asks the user to input text into the required field. How do I get that message to appear on the web page and not in the alert box? I haven't been able to work out how to do this

[Synook]

You have an element with some form of identification, hidden when the page loads, and then you assign to the .innerHTML property of that element and display it when the user makes an error.

[Woody]

The javascript code I have so far is as follows:

function valid(form) {  if (form.Name.value=='') {    alert("You must enter your name.");    form.Name.style.backgroundColor='yellow';    return false;  }  else { form.Name.style.backgroundColor='';}    if (form.Address.value=='') {    alert("You must enter your street address.");    form.Address.style.backgroundColor='yellow';    return false;  }  else { form.Address.style.backgroundColor='';}  if (form.Suburb.value=='') {    alert("You must enter your suburb or town.");    form.Suburb.style.backgroundColor='yellow';    return false;  }  else { form.Suburb.style.backgroundColor='';}  if (form.Postcode.value=='') {    alert("You must enter your postcode.");    form.Postcode.style.backgroundColor='yellow';    return false;  }  else { form.Postcode.style.backgroundColor='';}  if (form.Home.value=='') {  alert("You must enter your home phone number.");  form.Home.style.backgroundColor='yellow';  return false;  }  else { form.Home.style.backgroundColor=''; }  if (form.Street.value=='') {  alert("You must enter your delivery street address.");  form.Street.style.backgroundColor='yellow';  return false;  }  else { form.Street.style.backgroundColor=''; }  if (form.Town.value=='') {  alert("You must enter your delivery suburb or town.");  form.Town.style.backgroundColor='yellow';  return false;  }  else { form.Town.style.backgroundColor=''; }  if (form.Pcode.value=='') {  alert("You must enter your delivery address postcode.");  form.Pcode.style.backgroundColor='yellow';  return false;  }  else { form.Pcode.style.backgroundColor=''; }return true;  }

[thescientist]

are you sending the form anywhere? If you are, using PHP might make it easier to do this all in one.

[jeffman]

Synook is suggesting something that looks like this:<p id="message"> </p><form blah blah><input blah> <input blah> <input blah> </form>And then your JavaScript does this instead of an alert: if (form.Name.value=='') { document.getElementById("message").innerHTML = "You must enter your name.";Having an invisible character in the message paragraph when the page loads makes sure the paragraph takes up vertical space. If it didn't, when you enter text, it might go from zero vertical space to 14px of vertical space, and your page would jump 14px. This is an annoying thing we can avoid. There are other ways to avoid it, but I figured you'd want the simplest.

[Synook]

You could also toggle visibility:hidden if you wanted to hide the paragraph altogether without causing a jump.