...

View Full Version : Simple form Validation Problem



MainStWebGuy
06-03-2009, 09:08 PM
hello all,

I'm having a problem validating a pretty straight forward form, but i can't seem to figure it out:

The form should be checking to make sure that a visitor has entered their name, check to make sure the name entered is at least two digits, and then check to see if they have entered either the phone number or email address they can be reached at.

As of right now, it is validating the name input, but as long as the checkName() returns true, it's acting as if it skips over the checkPhoneEmail() function...

What am i missing?
Code:


<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
<!--
//name function is working
function checkName() {
if (document.form.VisitorName.value=="") {
alert("you must provide your name");
return false;
}
if (document.form.VisitorName.value.length < 2) {
alert("please enter your real name");
return false;
}
return true;
}
function checkPhoneEmail() {
if ((document.form.VisitorEmail.value=="" || document.form.VisitorEmail.value==null) && (document.form.VisitorPhone.value=="" || document.form.VisitorPhone.value==null)) {
alert("You must fill in Phone or Email");
return false;
}
return true;
}
//-->
</script>
</head>

<body>

<form name="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onsubmit="return checkName(); return checkPhoneEmail();">
<label>Name: <input type="text" name="VisitorName" id="VisitorName" /><br /></label>
<label>Phone: <input type="text" name="VisitorPhone" id="VisitorPhone" /><br /></label>
<label>Email: <input type="text" name="VisitorEmail" id="VisitorEmail" /><br /></label>
<input type="submit" value="GO!" />
</form>
</body>
</html>



I sure do appreciate any help or insight!!

THanks,
J

arthurakay
06-03-2009, 09:45 PM
I'm almost positive that the "onSubmit()" call of the FORM tag can only run a single JS call. (It will grab the first returned True value and run with it, i think...)

Thus, write a wrapper function which executes both of your methods, then returns T/F:



function wrapper() {

if (checkName() && checkPhoneEmail()) {
return true;
}
else { return false; }

}
...

onsubmit="wrapper();"
...

adios
06-04-2009, 12:53 AM
Anything you assign to an html event handler gets put inside a function wrapper, so it can be called like any other routine when the event for which it's named is fired on its element. See any problem here?


Form.onsubmit = function()
{
return checkName();
return checkPhoneEmail();
}

Pretty much eliminates any chance of 'checkPhoneEmail' being invoked. As suggested, bundle the call; a number of ways to do this.

<form .. onsubmit="return (checkName() && checkPhoneEmail())">

khill
06-10-2009, 06:55 PM
Instead of writing your own I found a handy script which can be setup to validate any form input field. I would suggest using it:

http://www.jshelpbox.com/viewtopic.php?f=4&t=9

Philip M
06-11-2009, 08:14 AM
function checkName() {
if (document.form.VisitorName.value=="") {

"Validation" like this is barely worthy of the name, as even a single space or a ? will return false (i.e. pass the validation). There are many threads in this forum where more effective validations are shown. Example:-


function checkName() {
var n = document.form.VisitorName.value;
n = n.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
n = n.replace(/[^a-z\-\'\s]/gi,""); // strip anything but a-z hyphen apostrophe space Mary-Lou O'Reilly
if (n.length > 2) { // minimum 2 characters in name
alert ("You must provide your name");
document.form.VisitorName.value = ""; // clear the field
document.form.VisitorName.focus(); // and refocus on it
return false;
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum