Form Validation - Field Format

I'd like to be able to validate whether these two fields are completed and also if they are in a certain format. I already have the validation below to check to see if the fields are empty.  I'd like to add the validation the existing code that will make sure that the Zip Code format is either XXXXX-XXXX or XXXXX and that the Phone number format is XXX-XXX-XXXX.  There are other fields in the form & other validation code, this is just what I need to change.

Form fields:

<form method="post" action="process.asp" onsubmit="return Blank_TextField_Validator(this)">

Zip Code: <input size=25 maxlength=10 name="zip">

Phone Number:<input type="text" name="telno" size=25>

</form>
               
Validation:

<script Language="JavaScript">
<!--
function Blank_TextField_Validator(form)
{
if (form.zip.value == "")
{
alert("Please fill in the Zip code field using the format XXXXX-XXXX or XXXXX.");
form.zip.focus();
return (false);
}
if (form.telno.value == "")
{
alert("Please fill in the Phone Number field using the format XXX-XXX-XXXX.");
form.telno.focus();
return (false);
}
return (true);
}
//-->

</script>


SteveH012698Asked:
Who is Participating?
 
bebonhamConnect With a Mentor Commented:
here's your page


<HTML>
<HEAD>
<script Language="JavaScript">
function Blank_TextField_Validator(form)
{
if (form.fname.value == "")
{
alert("Please fill in the First Name field.");
form.fname.focus();
return false;
}
if (form.lname.value == "")
{
alert("Please fill in the Last Name field.");
form.lname.focus();
return false;
}
if (form.address.value == "")
{
alert("Please fill in the Address field.");
form.address.focus();
return false;
}

if (form.city.value == "")
{
alert("Please fill in the City field.");
form.city.focus();
return (false);
}

mstr=form.zip.value
pok=false

r=/^\d{5}$/
if(r.exec(mstr)){
pok=true
}

r=/^\d{5}-\d{4}$/
if(r.exec(mstr))
{
pok=true

}

if(!pok)
{
alert("Please fill in the Zip code field using the format XXXXX-XXXX or XXXXX.");
form.zip.focus();
return false
}

tel=document.form.telno.value
r=/^\d{3}-\d{3}-\d{4}$/
if(!r.exec(tel))
{
alert("Please fill in the Phone Number field using the format XXX-XXX-XXXX.");
form.telno.focus();
return (false);
}
if (form.email.value == "")
{
alert("Please fill in the Email field.");
form.email.focus();
return (false);
}
if (form.coursedate.value == "")
{
alert("Please fill in the Course Date field.");
form.coursedate.focus();
return (false);
}
return (true);
}


</script>
</HEAD>
<BODY>
<FORM NAME="form">
fn<INPUT TYPE="TEXT" NAME="fname">
ln<INPUT TYPE="TEXT" NAME="lname">
ct<INPUT TYPE="TEXT" NAME="address">
ct<INPUT TYPE="TEXT" NAME="city">
zp<INPUT TYPE="TEXT" NAME="zip">
tel<INPUT TYPE="TEXT" NAME="telno">
em<INPUT TYPE="TEXT" NAME="email">
cd<INPUT TYPE="TEXT" NAME="coursedate">
<INPUT TYPE="BUTTON" ONCLICK="Blank_TextField_Validator(this.form)">
</FORM>



good luck,

Bob
0
 
nimaigCommented:
function validateZipCode(zipCode){
     if(zipCode != null && zipCode != ""){
          if((zipCode.indexOf("-") != -1 && zipCode.length < 10) || zipCode.length < 5){
               alert("\n field must be either (XXXXX) or (XXXXX-XXXX) format.");
               return false;
          }
     }else if(zipCode == null || zipCode == ""){
          alert("Please enter valid data");
          return false;
     }
     return true;
}
0
 
nimaigCommented:
Get and try the .js file. It has good validation methods.

http://developer.netscape.com/docs/examples/javascript/regexp/FormChek.js
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
SteveH012698Author Commented:
nimaig, I wanted to add the extra validation to what I already had.  How would you integrate your validation for the phone number field and zip field into my existing validation [below]. BTW, the zip code field is just named: zip



<script Language="JavaScript">
<!--
function Blank_TextField_Validator(form)
{
if (form.fname.value == "")
{
alert("Please fill in the First Name field.");
form.fname.focus();
return (false);
}
if (form.lname.value == "")
{
alert("Please fill in the Last Name field.");
form.lname.focus();
return (false);
}
if (form.address.value == "")
{
alert("Please fill in the Address field.");
form.address.focus();
return (false);
}
if (form.city.value == "")
{
alert("Please fill in the City field.");
form.city.focus();
return (false);
}
if (form.zip.value == "")
{
alert("Please fill in the Zip code field using the format XXXXX-XXXX or XXXXX.");
form.zip.focus();
return (false);
}
if (form.telno.value == "")
{
alert("Please fill in the Phone Number field using the format XXX-XXX-XXXX.");

form.telno.focus();
return (false);
}
if (form.email.value == "")
{
alert("Please fill in the Email field.");
form.email.focus();
return (false);
}
if (form.coursedate.value == "")
{
alert("Please fill in the Course Date field.");
form.coursedate.focus();
return (false);
}
return (true);
}
//-->

</script>



Thanks..
0
 
Michel PlungjanIT ExpertCommented:
Duplicate question.

Here is the suggestion from the other


<script>
function isZip(str) {
/* zip is either XXXXX-XXXX or XXXXX */
 if (!str) return false;
 testStr = new String(str);
 len = testStr.length;
 if (len!=5 && len!=10) return false
 if (len==10) {
    dashTest = testStr.split('-');
    if (dashTest.length !=2) return false;
    if (dashTest[0].length !=5 || dashTest[1].length!=4) return false
    if (isNaN(dashTest[0]) || isNaN(dashTest[1])) return false
 }
 else if (isNaN(testStr)) return false;
 return true;

}
function isPhone(str) {
/* Phone number format is XXX-XXX-XXXX. */
 if (!str) return false;
 testStr = new String(str);
 len = testStr.length;
 if (len!=12) return false
 dashTest = testStr.split('-');
 if (dashTest.length !=3) return false;
 if (dashTest[0].length !=3 || dashTest[1].length!=3 || dashTest[2].length!=4) return false
 if (isNaN(dashTest[0]) || isNaN(dashTest[1]) || isNaN(dashTest[2])) return false
 return true;
}

msg = new Array(
"Please fill in the Zip code field using the format XXXXX-XXXX or XXXXX.",
"Please fill in the Phone Number field using the format XXX-XXX-XXXX."
);
function Blank_TextField_Validator(form) {
if (!isZip(form.zip.value)) {
  isValid=false
  alert(msg[0]);
  form.zip.focus();
  retrun false;
}
if (!isPhone(form.telno.value)) {
  alert(msg[1]);
  form.telno.focus();
  return false;
}
return true;
}
//--></script>
0
 
Michel PlungjanIT ExpertCommented:
and
retrun false;
should of course be
return false;
0
 
SteveH012698Author Commented:
mplungjan, how do I integrate your code into my validation for all of the fields? [see just above your code]

FYI-I'm deleting that duplicate question on the other page:

http://www.experts-exchange.com/jsp/qManageQuestion.jsp?ta=javascript&qid=20137473

I don't know where that came from...
0
 
SteveH012698Author Commented:
Thanks bebonham, that works perfectly.  I'm not up to speed on regular expressions.  Do they work in all of the major browsers?

Thanks for the help..
0
 
Michel PlungjanIT ExpertCommented:
No they do not and not the same in all browser that support them.
split() works the same in all js1.1 browser which are to my knowledge NS3+ and IE4+

Michel
0
 
bebonhamCommented:
yeah they do not work is the old browsers,but I think they work in ie4

Bob
0
 
SteveH012698Author Commented:
bebonham, the validation works great, but the form won't submit. Also,

tel=document.form.telno.value - throws a null object error

in IE5, but
 
tel=form.telno.value - seems to work fine

--------------Try this form, it validates but won't submit


<FORM method="post" NAME="form" action="nextpage.htm">
fn<INPUT TYPE="TEXT" NAME="fname">
ln<INPUT TYPE="TEXT" NAME="lname">
ad<INPUT TYPE="TEXT" NAME="address">
ct<INPUT TYPE="TEXT" NAME="city">
zp<INPUT TYPE="TEXT" NAME="zip">
tel<INPUT TYPE="TEXT" NAME="telno">
em<INPUT TYPE="TEXT" NAME="email">
cd<INPUT TYPE="TEXT" NAME="coursedate">
<INPUT TYPE="BUTTON" value="Submit" ONCLICK="Blank_TextField_Validator(this.form)">
</FORM>
0
 
bebonhamCommented:
okay, the reason this won't submit is because <INPUT TYPE="BUTTON">

if you want it to submit, I suggest you use this:

<INPUT TYPE="SUBMIT" value="Submit" ONCLICK="return Blank_TextField_Validator(this.form)">

as far as the document. object causing an error...

hmmm...

if you say so, I won't argue...but the form can't be referenced without the document object (implicitly or explicitly) so there seems to be no reason why...but...

if it works without the document...do it..

Bob
0
 
Michel PlungjanIT ExpertCommented:
NOOOO

<form onSubmit="return Blank_TextField_Validator(this)">
.
.
.
<INPUT TYPE="SUBMIT" value="Submit">

Never use onClick on the submit button - it fails on many different browsers - mostly Netscapes and IE Macs

Michel
0
 
bebonhamCommented:
wouldn't want to offend any macs :)
0
 
SteveH012698Author Commented:
Ok, that works fine, thanks again to both for your help. I'll post the whole thing in case someone else may have a question like this.


<HTML>
<HEAD>
<script Language="JavaScript">
function Blank_TextField_Validator(form)
{
if (form.fname.value == "")
{
alert("Please fill in the First Name field.");
form.fname.focus();
return false;
}
if (form.lname.value == "")
{
alert("Please fill in the Last Name field.");
form.lname.focus();
return false;
}
if (form.address.value == "")
{
alert("Please fill in the Address field.");
form.address.focus();
return false;
}

if (form.city.value == "")
{
alert("Please fill in the City field.");
form.city.focus();
return (false);
}

mstr=form.zip.value
pok=false

r=/^\d{5}$/
if(r.exec(mstr)){
pok=true
}

r=/^\d{5}-\d{4}$/
if(r.exec(mstr))
{
pok=true

}

if(!pok)
{
alert("Please fill in the Zip code field using the format 00000-0000 or 00000");
form.zip.focus();
return false
}

tel=form.telno.value
r=/^\d{3}-\d{3}-\d{4}$/
if(!r.exec(tel))
{
alert("Please fill in the Phone Number field using the format 000-000-0000");
form.telno.focus();
return (false);
}
if (form.email.value == "")
{
alert("Please fill in the Email field.");
form.email.focus();
return (false);
}
if (form.coursedate.value == "")
{
alert("Please fill in the Course Date field.");
form.coursedate.focus();
return (false);
}
return (true);
}


</script>
</HEAD>
<BODY>


<FORM method="post" NAME="form" action="nextpage.asp" onSubmit="return Blank_TextField_Validator(this)">
fn<INPUT TYPE="TEXT" NAME="fname">
ln<INPUT TYPE="TEXT" NAME="lname">
ad<INPUT TYPE="TEXT" NAME="address">
ct<INPUT TYPE="TEXT" NAME="city">
zp<INPUT TYPE="TEXT" NAME="zip">
tel<INPUT TYPE="TEXT" NAME="telno">
em<INPUT TYPE="TEXT" NAME="email">
cd<INPUT TYPE="TEXT" NAME="coursedate">
<INPUT TYPE="SUBMIT" value="Submit">
</FORM>

</BODY>
</HTML>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.