PDA

View Full Version : validation not working...why?!



razorbladekiss
10-03-2008, 07:25 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" language="javascript">
function validatePizzaForm() {

if (isNaN(document.formPizza.txtBoxQuantity.value)) {
alert ("Please enter a quantity");
return false;
}
else if (!document.formPizza.radioSize_0.checked &&
!document.formPizza.radioSize_1.checked &&
!document.formPizza.radioSize_2.checked &&
!document.formPizza.radioSize_3.checked){
alert("Please select a size of pizza");
return false;
}

return true;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris' Pizza Shop</title>
</head>

<body>
<form id="formPizza" name="formPizza" method="post" action="">
<table width="100%" border="0">
<tr>
<td colspan="2"><div align="center">Pizza Order Form</div></td>
</tr>
<tr>
<td width="50%"><div align="right">Quantity:</div></td>
<td width="50%"><label>
<input type="text" name="txtBoxQuantity" id="txtBoxQuantity" />
</label></td>
</tr>
<tr>
<td><div align="right">Size:</div></td>
<td><p>
<label>
<input type="radio" name="radioSize" value="10" id="radioSize_0" />
Small</label>
<br />
<label>
<input type="radio" name="radioSize" value="12" id="radioSize_1" />
Medium</label>
<br />
<label>
<input type="radio" name="radioSize" value="14" id="radioSize_2" />
Large</label>
<br />
<label>
<input type="radio" name="radioSize" value="16" id="radioSize_3" />
Extra Large</label>
<br />
</p></td>
</tr>
<tr>
<td><div align="right">Ingredients:</div></td>
<td><select name="listBoxIngredients" id="listBoxIngredients">
<option value="Cheese" selected="selected">Cheese</option>
<option value="Sausage">Sausage</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Mushroom">Mushroom</option>
<option value="Taco">Taco</option>
</select></td>
</tr>
<tr>
<td><div align="right">
<label>
<input type="submit" name="submit" id="submit" value="Submit" onclick="validatePizzaForm()" />
</label>
</div></td>
<td><label>
<input type="reset" name="Clear" id="Clear" value="Reset" />
</label></td>
</tr>
</table>
</form>
</body>
</html>


I realize that you guys aren't here to do my homework, but the homework isn't the javascript it'll actually be PHP. I just don't understand where my javascript is off. I've gone through google several times, trying several searches. From what I've read, my code is correct. I'm probably missing like one little thing. Thanks for any help any one is willing to give me. A helpsite is my last resort [I spent 3 hours trying to figure out what was f$(#@& up with my code].

clueful
10-04-2008, 12:51 AM
isNAN will return false for "" because an empty string evaluates to null which equals 0. The easiest solution is to use a regex to test for the presence of a digit, then call isNaN if necessary.

if ( !document.formPizza.txtBoxQuantity.value.match(/\d/) || isNaN(document.formPizza.txtBoxQuantity.value))The onclick handler must return the return value of the validator, otherwise the latter has no effect:
onclick="return validatePizzaForm()"

magicyte
10-04-2008, 01:22 AM
Also, when you have a submit button, it will always submit a form. In this case, if you wish to validate the form, you should change the submit button to a regular button. If you do that, you must use the .submit() function to submit the form you wanted to validate.

-magicyte

jscheuer1
10-07-2008, 05:56 AM
isNAN will return false for "" because an empty string evaluates to null which equals 0.

Yes.


The easiest solution is to use a regex to test for the presence of a digit, then call isNaN if necessary.

if ( !document.formPizza.txtBoxQuantity.value.match(/\d/) || isNaN(document.formPizza.txtBoxQuantity.value))

Easiest? To evaluate if a form's element's value is a number or not (as much as I love regular expressions) it would be easier to:


if(value == '' || isNaN(value)) rejection code goes here


The onclick handler must return the return value of the validator, otherwise the latter has no effect:
onclick="return validatePizzaForm()"

Forms should generally be validated on the form element's onsubmit event, not the onclick event of a button.

Further, form elements should be accessed as a part of the elements collection of the form as part of the forms collection of the document:


document.forms['formName'].elements['elementName']

Not:


document.formName.elementName

This can be greatly simplified if the form itself is passed to the script code. For example, one can:


<form action="#" onsubmit="return validate(this);">

Then in the validate function:


function validate(f){
f = f.elements;
. . .
};

In a case like the above:


document.formPizza.txtBoxQuantity.value

Which should be:


document.forms['formPizza']['txtBoxQuantity'].value

would become:


f['txtBoxQuantity'].value

and would still be being referenced properly as a part of the document.forms['formName'].elements collections.

clueful
10-07-2008, 11:34 AM
Easiest? To evaluate if a form's element's value is a number or not (as much as I love regular expressions) it would be easier to:


if(value == '' || isNaN(value)) rejection code goes hereThat will fail for " ".


Forms should generally be validated on the form element's onsubmit event, not the onclick event of a button.
That is how I would do it, but I have not encountered a situation where using the onclick event (of the submit button) causes a problem.

Further, form elements should be accessed as a part of the elements collection of the form as part of the forms collection of the document:


document.forms['formName'].elements['elementName']

Not:


document.formName.elementNameThe forms collection and elements array should be addressed, but [] notation is required only when the name is unknown in advance or may change.

jscheuer1
10-07-2008, 04:24 PM
That (isNaN test) will fail for " ".

Strange, as a space is not a number, but of course you are right. Learn something new all the time.

This would suffice (slightly more overhead, perhaps - but certainly simpler, easier):


if (isNaN(parseInt(value))) rejection code here;

I prefer the bracketed notation in code as I outlined partly because of the fact that one cannot know what use it will be put to, again you are right about what you said as regards known form and element names.

The important part though is, as we agree, that one use the forms and elements collections.