?
Solved

Form Validation - Field Format

Posted on 2001-06-18
15
Medium Priority
?
452 Views
Last Modified: 2008-02-01
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>


0
Comment
Question by:SteveH012698
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 4
  • +1
15 Comments
 
LVL 9

Expert Comment

by:nimaig
ID: 6203758
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
 
LVL 9

Expert Comment

by:nimaig
ID: 6203793
Get and try the .js file. It has good validation methods.

http://developer.netscape.com/docs/examples/javascript/regexp/FormChek.js
0
 

Author Comment

by:SteveH012698
ID: 6203983
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6204004
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6204007
and
retrun false;
should of course be
return false;
0
 

Author Comment

by:SteveH012698
ID: 6204706
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
 
LVL 8

Accepted Solution

by:
bebonham earned 400 total points
ID: 6204886
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
 

Author Comment

by:SteveH012698
ID: 6205162
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6205362
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
 
LVL 8

Expert Comment

by:bebonham
ID: 6206346
yeah they do not work is the old browsers,but I think they work in ie4

Bob
0
 

Author Comment

by:SteveH012698
ID: 6207829
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
 
LVL 8

Expert Comment

by:bebonham
ID: 6210345
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6210600
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
 
LVL 8

Expert Comment

by:bebonham
ID: 6211254
wouldn't want to offend any macs :)
0
 

Author Comment

by:SteveH012698
ID: 6212888
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

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question