Link to home
Start Free TrialLog in
Avatar of cuconsortium
cuconsortiumFlag for United States of America

asked on

Forms Validation

How do I validate a form on submit and print the error message on the Page instead of  alert box?

Thank you!!
Avatar of thecrew
thecrew

I would suggest jQuery.  Easy to use, easy to customize.

http://docs.jquery.com/Plugins/validation

Avatar of cuconsortium

ASKER

why this one is so popular?  
I'm looking for java script.  how about something related to "getInnerHTML"?
jQuery is JavaScript.

It's popular because it works, it's open, it's free, it's easy to use and it's well documented.

Read the page I sent you. It will do EXACTLY what you are asking to do.
it seems the validation is pretty fix to E-mail Address, Phone Number, URL... and etc.  I need to valdidate the input types in my ownways.
Avatar of Michel Plungjan
Here is the canonical validation. jQuery is not needed for simple validation and I only use jQuery if I already need it for some animation.
<html>
<head>
<script>
function validate(theForm) {
  var field1 = theForm.field1.value;
  if (field1=="") {
    alert('Please enter something in field1');
    theForm.field1.focus(); // put the cursor back in the field
    return false; // cancel submission
  }

  var field2 = theForm.field2.value;
  if (field2=="") {
    alert('Please enter something in field2');
    theForm.field2.focus(); // put the cursor back in the field
    return false; // cancel submission
  }

// repeat the above as needed

  return true; // here all fields validates, allow submission
}
window.onload=function() {
  // courtesy method to place the cursor in the first field
  document.forms[0].field1.focus(); // forms[0] is the first form on the page
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<input type="text" name="field1" value="" /><br>
<input type="text" name="field2" value="" /><br>
<input type="submit" />
</form>
</body>
</html>

Open in new window

mplungjan,

  it's pretty good, but it's prompting alert box.  Is there anyway that i can print the error message on the page itself?

  Or

   have one alert box list all the errors when onSumbit?

Thank you!!
That is the reason I was suggesting jQuery, you can easily show errors inline wherever and however you like. The validation can be applied to anything you want (not just emails and phone numbers, those are just examples on the plugin page). I've used it to validate a date-range, a percentage, all sorts of crazy things. Although I completely agree with mplungjan, if you are not already using it for another legitimate reason it might not be the best solution.

To change text on the page you could use

document.getElementById('theID').innerHTML = 'Error man!';
(your HTML could be something like this: <b id="theID"></b>)


SOLUTION
Avatar of thecrew
thecrew

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok, i'm gonna try it out and report back~
Hi all~

  I was out for a week.  I'm gonna take a look at this this week.
yesss!!! good job~~!  I feel bad that I wasn't able to be more involved than I want myself to be.  
You've done a good job!!!