Phone Validation Problem (I reformatted the code to make it easier to read)

[AnnMarie]

<script language="JavaScript" type="text/javascript">
<!--
function validate(theForm)
{
var validity = true; // assume valid
if(frmComments.name.value=='' && validity == true)
{
alert('Your full name is required. Please enter your full name!');
validity = false;
frmComments.name.focus();
event.returnValue=false;
}
if(frmComments.company.value=='' && validity == true)
{
alert('Your company name is required. Please enter the name of your
company!');
validity = false;
frmComments.company.focus();
event.returnValue=false;
}
var pattern1 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
if (!pattern1.test(frmComments.email.value) && validity == true)
{
alert("Invalid E-mail Address! Please re-enter.")
frmComments.email.focus();
validity = false;
return false;
}
if(frmComments.zip.value == "" )
return true;
else
{
var pattern2 = /\d{5}/;
if(pattern2.test(frmComments.zip.value))
return true;
else
{
if(!pattern2.test(frmComments.zip.value) && validity == true)
{
alert("Invalid Zip Code! Must be in form 12345. Please re-enter.");
frmComments.zip.focus();
validity = false;
return false;
}
}
}
if(frmComments.phone.value == "")
return true;
else
{
var pattern3 = /\d{3}\-\d{3}\-\d{4}/;
if(pattern3.test(frmComments.phone.value))
return true;
else
{
if(!pattern3.test(frmComments.phone.value)&& validity == true)
{
alert("Invalid Phone Number! Must be in form 555-555-5555. Please
re-enter.");
frmComments.phone.focus();
validity = false;
return false;
}
}
}
}

function formSubmit()
{
window.event.returnValue = false;
if ( confirm ( "Are you sure you want to submit?" ) )
window.event.returnValue = true;
}
function formReset()
{
window.event.returnValue = false;
if ( confirm( "Are you sure you want to reset?" ) )
{
frmComments.name.focus();
window.event.returnValue = true;
}
}
// -->
</script>

<form id="frmComments"
action="http://matrix.csis.pace.edu/~f03-it604-s03/cgi-bin/comments.pl"
method="post" onSubmit="return validate(this);" onReset="return
formReset(this)">

<input type="submit" align="right" value="Submit" name="submit"
onclick="formSubmit()">

-----------------------------------------------------------
This is the link to the html page:

http://matrix.csis.pace.edu/~f03-it604-s03/project/comments.html

I tried to make the code easier to read by manually formatting it by
removeing the indents and line breaks. I don't know the technique you
suggested of formatting it with a certain number of columns. Please
let me know how to do that.

I am new to this group and may do things incorrectly until learn.

I don't know if you remember my problem of:

My phone validation doesn't work within my validate function. It works
alone, but not within this function like the other validations do.

Phone is not required, but if the user enters a phone number it must
be in the form of 555-555-5555.

Also, my submit confirmation dialog box comes up first and
continuously. I want it to appear last and once before final valid
submission.

Please let me know of a correct and better way of validating these
required fields: name, company, email, and validating phone for
correct format if user fills in phone number.

Thanks for your help.

 

[kaeli]

<script language="JavaScript" type="text/javascript">
<!--
function validate(theForm)
{
var validity = true; // assume valid
if(frmComments.name.value=='' && validity == true)
{
alert('Your full name is required. Please enter your full name!');
validity = false;
frmComments.name.focus();
event.returnValue=false;
}

A simple return false would suffice.

frmComments.name.focus();
return false;
}

if(frmComments.zip.value == "" )

If the user didn't enter anything at all, value is undefined in some
browsers. Thus, you can't compare it to the null string. I had this type
of comparison fail miserably in a version of IE. So now, I do

if (!frmComments.zip || frmComments.zip.value == "")

return true;
else
{
var pattern2 = /\d{5}/;
if(pattern2.test(frmComments.zip.value))
return true;
else
{
if(!pattern2.test(frmComments.zip.value) && validity == true)
{
alert("Invalid Zip Code! Must be in form 12345. Please re-enter.");
frmComments.zip.focus();
validity = false;

No point in setting this if you return right after.
Actually, no point in it at all, since returning false after failure
prevents any more code from running.

return false;
}
}
}
if(frmComments.phone.value == "")

Again, test for the object, then the value.
You say it doesn't work, but you don't explain WHAT doesn't work. Does
it throw an error? Does it say it isn't valid when it is? Does it say it
is valid when it isn't?

function formSubmit()
{
window.event.returnValue = false;

if ( confirm ( "Are you sure you want to submit?" ) )
window.event.returnValue = true;

return true would be fine.

if (confirm...) return true
else return false

<form id="frmComments"
action="http://matrix.csis.pace.edu/~f03-it604-s03/cgi-bin/comments.pl"
method="post" onSubmit="return validate(this);" onReset="return
formReset(this)">

<input type="submit" align="right" value="Submit" name="submit"
onclick="formSubmit()">

onClick fires BEFORE the onSubmit, so the confirm would fire first.
That's why that is happening. Remove it from the onClick of the submit
button and change onSubmit to...

onSubmit="if (validate(this)) formSubmit();"

Tell more about what's wrong with the phone validation after you change
this stuff and see if it still doesn't work.

 

[AnnMarie Caruso]

Thanks for your help.

 

[Lasse Reichstein Nielsen]

A simple return false would suffice.

It also has the advantage of working in non-IE browsers. This code
uses "event" as a global variable, which only works in IE.

If the user didn't enter anything at all, value is undefined in some
browsers. Thus, you can't compare it to the null string. I had this type
of comparison fail miserably in a version of IE. So now, I do

if (!frmComments.zip || frmComments.zip.value == "")

You say that "value" is undefined, but check whether "zip" is defined.
Is this deliberate.

I ususally use
if (! elemRef.value) {...}
That works both if the value is undefined and if it is the empty string.

/L

 

[kaeli]

It also has the advantage of working in non-IE browsers. This code
uses "event" as a global variable, which only works in IE.

I thought as much, but didn't want to say because I wasn't sure.

You say that "value" is undefined, but check whether "zip" is defined.
Is this deliberate.

Yes. In one of the browsers (I think it was IE5-something, but may have
been a netscape issue) if the user hadn't filled anything in, the test
for (element.value=="") threw an error unless I checked like the above.
I can't really explain why - could be a browser bug. I've just been
doing that for a while now and have had no more problems. *G*

Actually, I've these days I use my functions for validating. This is my
isBlank. Call like
if (isBlank(document.form1.elementname))

function isBlank(strObject)
{
/* Returns true if the field is blank, false if not.
You must pass in an input (text) object (not the value) */
var re = /\S+/;

if (!strObject) return true;
if (re.test(strObject.value)) return false;
else return true;
}


--
~kaeli~
Not one shred of evidence supports the notion that life is
serious.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Lasse Reichstein Nielsen]

Yes. In one of the browsers (I think it was IE5-something, but may have
been a netscape issue) if the user hadn't filled anything in, the test
for (element.value=="") threw an error unless I checked like the above.

Curious. That would definitly be a bug. If you find the browser, please
say so.

I can't really explain why - could be a browser bug. I've just been
doing that for a while now and have had no more problems. *G*

It's voodoo

Actually, I've these days I use my functions for validating. This is my
isBlank. Call like
if (isBlank(document.form1.elementname))

document.forms.form1.elementname
would be correct according to W3C DOM specification. I prefer
document.forms['form1'].elements['elementname']
but that's only a matter of style.

function isBlank(strObject)
{
/* Returns true if the field is blank, false if not.
You must pass in an input (text) object (not the value) */
var re = /\S+/;

if (!strObject) return true;
if (re.test(strObject.value)) return false;
else return true;

Just because I like to abbreviate logical tests:

return (!strObject || !/\S/.test(strObject.value));

(It always comes over me when I see something like
if (...) {return true;} else {return false;}
or
(...)?true:false
or the negation).

/L 'and don't get me started on (...)?1:0 ...'

 

[kaeli]

document.forms.form1.elementname
would be correct according to W3C DOM specification.

Really?
I've always seen the above.

I prefer
document.forms['form1'].elements['elementname']
but that's only a matter of style.

I prefer that when I'm coding for more than IE5/NN6 (intranet apps are
my main JS usage, so I get to not care so much about browsers).

Just because I like to abbreviate logical tests:

return (!strObject || !/\S/.test(strObject.value));

(It always comes over me when I see something like
if (...) {return true;} else {return false;}
or
(...)?true:false
or the negation).

/L 'and don't get me started on (...)?1:0 ...'

The way I code is completely dependent on who might modify it later and
what modifications might be done. It has to be easily understandable and
modifiable if it's shared code.
It's easier to add stuff to if/else blocks if they're already blocked
out. Like alerts when you're tracing problems.

I happen to LOVE
x = y==3?0:1

But it's a bitch for people to understand later if they try to modify
it.
*LOL*

 

[Lasse Reichstein Nielsen]

Really?
I've always seen the above.

Yep. There is nothing in the W3C DOM that requires the document object
to have properties corresponding to form names. Ofcourse, all browsers
have it, since people have been writing document.formName since
Netscape 2 (the first browser with Javascript support).

The document.forms collection is part of the W3C DOM, both v1 and v2.
It has also existed since Netscape 2.

The way I code is completely dependent on who might modify it later and
what modifications might be done. It has to be easily understandable and
modifiable if it's shared code.

Ah, readability and maintainability. That are acceptable reasons for
writing extra code.

It's easier to add stuff to if/else blocks if they're already blocked
out. Like alerts when you're tracing problems.

Absolutely. I always add { } around by if-branches, because it prevents
stupid errors like
if (...) return false;
else
alert(foo);return true;

I happen to LOVE
x = y==3?0:1

For what?

At least make it
x= y==3?false:true;
Then it is obvious that the values represent a boolean result, not
numbers. I have yet to see a case where the value of (...)?0:1 was
used as a number.

Ofcourse, I prefer
x = y!=3;
and for extra readability I would name x something that sounded "boolean"
notEqual = y != 3;

It looks so much better to write
if(notEqual){ ... }
than
if(x){ ... }
The latter is probably what makes people write
if(x==true){ ... }

But it's a bitch for people to understand later if they try to modify
it.

Using boolean values for boolean results will definitly make it easier
to read. Not shorter, ofcourse.

/L

 

[kaeli]

For what?

At least make it
x= y==3?false:true;
Then it is obvious that the values represent a boolean result, not
numbers. I have yet to see a case where the value of (...)?0:1 was
used as a number.

I was giving that as an example. I meant the shortcut syntax.
I use it in java tons, like
String tmpString = request.getParameter("page");
int pg = tmpString==null?0:Integer.parseInt(tmpString);

If a value is boolean, I use true/false.

--
~kaeli~
User: The word computer professionals use when they mean
'idiot'.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace