Jump to content

Form Validation Message


Woody
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...