vindictive validation

[Gilead]

Got my form to process, finally! Now I need to check it for problems. Only it submits to the processing page without validating anything.

Here is the code:
<script Language="JavaScript">

function Form1_Validator(theForm)
{
if (theForm.name.value== "")
{ alert("Please enter your NAME.");
theForm.name.focus();
return (false);
}

if (theForm.phone.value== "")
{ alert("Please enter your phone number.");
theForm.phone.focus();
return (false);
}


var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.theForm.email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
theForm.email.focus();
return (false);
}

}

</script>

<form name="theForm" action="coffeeorder.php" method="POST">
<span class="required">*</span>Name:<input type="text" name="name" size=30 value=""><br />
<span class="required">*</span>Phone:<input type="text" name="phone" size=6 value=""><br />
<span class="required">*</span>Email:<input type="text" name="email" size=30 value=""><br />
...
<input type="submit" name="Submit" value="Submit" onsubmit="return Form1_Validator(this)"><input type="reset">

</form>

Everything looks right so I don't know why it's not working.
Thanks!

[Fotiman]

The language attribute is invalid and a hold over from the early days. Don't use it. Use type="text/javascript" instead (if you want it to validate as HTML 4.01) or no attributes at all if you're using an HTML5 doctype or don't care about HTML validation.

And onsubmit is a handler for the form element, not your submit button. So move the onsubmit to the form and it will probably work.

When in doubt, validate [validator.w3.org]! That will eliminate many of your problems.

[Gilead]

The page was originally written with 4.01, so I changed the validation. Also changed the type for the script tag. I don't quite understand what you mean by moving the onSubmit to the form. It is inside the form tag. Does it need to be somewhere else?

I tried placing it in the form tag, but still no joy.


<form method="POST" action="coffeeorder.php" onSubmit="return Form1_Validator(this)" name="theForm" language="JavaScript">

<input type="submit" name="Submit" value="Submit" ><input type="reset">
</form>

[Fotiman]

Looks like you included the language attribute on the form?! Try this:

<form method="POST" action="coffeeorder.php" onsubmit="return Form1_Validator(this)">

Next, you have another problem, which is that you have given an input element a name of "name", which will cause problems because the form element itself has a name attribute, so if you do theForm.name it's not clear if you're trying to access the name attribute of the form or an input with the name "name" that's in the form. The solution: rename your input to something like "sname".

[Gilead]

That did the trick!
Thanks!

[rocknbil]

From a user standpoint, these types of validations are annoying, and it seems like every site out there uses them this way. Miss one, get an alert. Miss another, get an alert. By the third or fourth one, I'm feeling pretty stupid, but the truth is I'm in a hurry and don't take time to read. :-) Many users are like this, which is why I like to put all my alerts at once (not that I'll read those either, but it's worth a try.)

Plus this approach gets *extremely* handy on large forms, it cuts your code down by a few hundred lines.

You should **really** be using id's on your form, there are various reasons and making validation easier is one of them. You don't even have to pass a reference to the form if you do.

Last, note how I attached the action to the form in window.onload - say "no" to inline Javascript. :-)

<script type="text/javascript"> 
window.onload=function() { 
 document.getElementById('myform').onsubmit = function() { return Form1_Validator(); }; 
}; 
// 
function Form1_Validator() { 
 var msg=''; // starts off empty. If it's not empty, there are errors. 
 var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 
 var first_focus=''; // If multiple errors, focus only on the first. 
 // Create an association of form field to error message. Try to avoid 
 // id's/names that may conflict with the DOM or JS methods, like name, submit, 
 // search . . .  
 required = { 
 'your-name':'Please enter your NAME.', 
 'phone':'Please enter your phone number.', 
 'email':'Please enter a valid email address' 
 } 
 for (key in required) { 
 if (document.getElementById(key).value=='') { 
 msg += required[key] + "\n"; 
 if (first_focus=='') { first_focus=key; } 
 } 
 } 
 // A "special" validation for email - a blank email and 
 // a poor match are two different conditions. Note you might want 
 // to do the same with the phone number. 
 if ((msg=='') && 
 (! emailRegEx.test(document.getElementById('email').value)==true)) { 
 msg = "Please enter a valid email address.\n"; 
 first_focus='email'; 
 } 
 if (msg != '') { 
 alert(msg); 
 document.getElementById(first_focus).focus(); 
 return false; 
 } 
 // No need for else, it won't get here if there's errors 
 return true; 
} 
</script> 

(A note, I just tested both of these in a test file, this is working code.)

Some changes to the form for the ID's which reveals another tool requiring ID's - form labels, for accessibility. Use semantic elements (<br> is rarely needed), and you're mixing HTML with XHTML:

0 value=""><br /> <!-- XHTML: <input/><br/> HTML: <input><br> -->

Pick one and roll with it.

<form name="theForm" id="myform" action="coffeeorder.php" method="POST">
<p><span class="required">*</span><label for="your-name">Name:</label><input type="text" name="your-name" id="your-name" size="30" value=""></p>
<p><span class="required">*</span><label for="phone">Phone:</label><input type="text" name="phone" id="phone" size="6" value=""></p>
<p><span class="required">*</span><label for="email">Email:</label><input type="text" name="email" id="email" size=30 value=""></p>
<p><input type="submit" name="Submit-button" id="submit-button" value="Submit"><input type="reset"></p>
</form>

[Gilead]

Thank you!