• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 190
  • Last Modified:

Simple form validation question.

Instead of me diving in books and learn JavaScipt, with which I don't have the time.  I just need a simple validation solution.

I have a few fields in my form, and would like to validate if they are blank or empty.

Here is some code I am testing with:
<html>
<head>
<script type='text/javascript'>
function checkRequired(){
if (form.empName.value == "")
{alert("You have left a required field blank.");}
}
</script>
</head>
<body>
<form>
<input name=empName type='text' onblur=checkRequired()>
<input name=empPhone type='text' onblur=checkRequired()>
<input name=empEmail type='text' onblur=checkRequired()>
</form>
</body>
</html>

What I want to do is be able to send the name of the field into the javascript so it can check that field, if it is blank I want it to give the alert, and set focus back on that field.  That is all, I have seen this code work before, but can't recall where.  I said it was simple.  Help would be greatly appreciated, and thank you.
0
Meps
Asked:
Meps
  • 3
  • 2
1 Solution
 
mattfairwCommented:
a better method would be to check on submit:

<html>
<head>
<script type='text/javascript'>
function checkRequired(theForm){
if (theForm.empName.value == "" || theForm.empPhone.value == "" || theForm.empEmail.value == "")
{
alert("You have left a required field blank.");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="newPage.ext" onSubmit="return checkRequired(this)>
<input name=empName type='text'>
<input name=empPhone type='text'>
<input name=empEmail type='text'>
</form>
</body>
</html>
0
 
mattfairwCommented:
and a little modification (i left out a quote and a submit button ;) )

<html>
<head>
<script type='text/javascript'>
function checkRequired(theForm){
if (theForm.empName.value == "" || theForm.empPhone.value == "" || theForm.empEmail.value == "")
{
alert("You have left a required field blank.");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="newPage.ext" onSubmit="return checkRequired(this)">
<input name=empName type='text'>
<input name=empPhone type='text'>
<input name=empEmail type='text'>
<input type="submit" name="subBtn" value="Submit" />
</form>
</body>
</html>

-Matt
0
 
MepsAuthor Commented:
I wish I could use onSubmit, but my real page causes this to be an impossiblilty.

Here is what I have so far.
<SCRIPT>
function checkRequired(field){
if (field.value == "")
{alert("You have left a required field blank. \n Please ensure all fields are completed.");
field.focus();}
}
</SCRIPT>

The only problem is that if the customer clicks on the name field, then tabs over to another field, you run into a loop where both the name and the phone switch off with the error.

I saw this site, but I don't understand where the timeout comes into play.
http://forums.aspfree.com/t22355/s.html
0
 
mattfairwCommented:
alright, i wasn't sure how that site was doing it either, but i solved it by using a global variable to do a pseudo test if a field lost focus due to the function:

<html>
<head>
<SCRIPT>
var globalCheckVar = 1;
function checkRequired(field){
  if (field.value == "" && globalCheckVar)
  {
    alert("You have left a required field blank. \n Please ensure all fields are completed.");
    globalCheckVar = 0;
    field.focus();
  }
  else
  {
  globalCheckVar = 1;
  }
}
</SCRIPT>
</head>
<body>
<form>
<input name=empName type='text' onBlur="checkRequired(this)" size="20">
<input name=empPhone type='text' onBlur="checkRequired(this)"size="20">
<input name=empEmail type='text' onBlur="checkRequired(this)"size="20">
</form>
</body>
</html>

-Matt
0
 
MepsAuthor Commented:
Thanks a lot for the help.  It worked very well.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now