Solved

Form Validation - Field Format

Posted on 2001-06-18
15
410 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
  • 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
 
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 100 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now