validation not working...why?!

**razorbladekiss** · 10-03-2008, 07:25 PM

Code:

<!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.

Code:

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:

Code:

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

Originally Posted by clueful

isNAN will return false for "" because an empty string evaluates to null which equals 0.

Yes.

Originally Posted by clueful

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

Code:

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:

Code:

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

Originally Posted by clueful

The onclick handler must return the return value of the validator, otherwise the latter has no effect:

Code:

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:

Code:

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

Not:

Code:

document.formName.elementName

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

HTML Code:

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

Then in the validate function:

Code:

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

In a case like the above:

Code:

document.formPizza.txtBoxQuantity.value

Which should be:

Code:

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

would become:

Code:

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:

Code:

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

That 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:

Code:

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

Not:

Code:

document.formName.elementName

The 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

Originally Posted by clueful

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):

Code:

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.

Thread: validation not working...why?!

Thread Tools

Search Thread

validation not working...why?!

Bookmarks

Bookmarks

Posting Permissions