Form validation not working in Firefox

grape_moosha · 05-06-2008, 08:44 PM

Hey everyone

I have a form on a page that people fill in their name, address, email
and such and then when the submit button is pressed an external JS file
validates the data, for example if nothing is entered in the name textbox then an alert will pop up saying "Please enter your name" etc.

I have a problem that when the submit button is pressed in Firefox (and i think IE7) instead of validateing with the javascript file it just goes straight to the submission page

can anyone shed light on this?

thankyou in advance
-Alex

Boogle · 05-07-2008, 05:47 AM

Could we see the code please? You must make srue JS is cross-browser compatible, it could be that yours is not, and put simply, if the browser doesn't recognise the JS it will just skip it and go onto the next method/action point.

Boog's

grape_moosha · 05-07-2008, 06:14 AM

here is my JS code

Code:

function validate() {
//this declares that this function is called validate
var pcodee;
pcodee = 0;
pcodee = parseFloat(orderform.pcode.value);
/*These next few lines declare pcodee as a variable and then set the variable as 0.
the line after that goes to the form and gets the pcode value and converts the string to a floating number(numeric) so it
can later be checked if it is a number or not */

if (orderform.user.value==""){

alert("Please enter your Name");

return valid=false;

}

if (orderform.add.value==""){

alert("Please enter your Address");

return valid=false;
}

if (orderform.suburb.value==""){

alert("Please enter your Suburb");

return valid=false;
}
/*The first 3 IF's check the first 3 text boxes in the form to see if they have had anything entered, and if not then an alert box will show telling the user
to enter something and then it will stop the javascript which makes it so the user does not get baraged with alert boxes just one*/

if (orderform.pcode.value.length !=4 || isNaN(pcodee) ){
/*This line checks that first of all the postcode is not 4 numbers in length and/or it is not a number.
if either of these are true then the next few lines will make the alert box show and the JS will stop as with the other If's*/

alert("You must Enter a Post code of 4 Numbers");

return valid=false;
}

if (orderform.email.value.indexOf("@") == -1 || orderform.email.value.indexOf(".") == -1 ){
/* With this Line it checks the email text box to see if it doesnt have an "@" or an "." and if it doesnt have one or the other or both of these
then the next couple of lines will tell the user that the email inputted needs to be valid and again it will stop the code, what stopping the code also does it
stops the form from being submitted to the processing, once all validation checks are clear, this being the last one the infomation will then be sent
along to be processed */

alert("You must Enter a valid email address");

return valid=false;
}



}





function openhelp(){
window.open("help.html","_blank","width=400, height=400")
}

And here is my HTML code

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" xml:lang="en" lang="en"> 

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="css/yeh.css" />
<title>Order Form</title>
<script type="text/javascript" src="../javascript/formvalid.js"> </script>

</head>



<body> 
<a name="top" />
<br />
<div id="heading" align="center">
<img src="../images/joes_header.jpg" alt="Joes Fruit Shop" vspace="30" /></div>

<div id="menu" align="center">
<img src="../images/berry01_red.gif" alt="Berry" /><p />
<a href="home.html" title="Home">Home</a>
<p />
<img src="../images/berry01_red.gif" alt="Berry" /><p />
<a href="produce.html">Produce</a>
<p />
<img src="../images/berry01_red.gif" alt="Berry" /><p />
<p><a href="html/history.html" title="History">History</a></p>
<p>&nbsp;</p>
</div>

<div id="main" align="center"> <br />
<h1>Make an Order</h1> <br />

<form name="orderform" method="post" action="http://www.mydomain.com/process.php" onsubmit="return validate(this);">

 * Name: <input type="text" name="user" value="" size="30" /> * Email Address: <input type="text" id="email" value="" size="60" /><br />
 * Address: <input type="text" name="add" value="" size="40" />
 * Suburb: <input type="text" name="suburb" value="" size="20" /> * Postcode: <input type="text" id="pcode" value="" size="4" /><br />
<br />
  Orders: <br />
  <textarea name="textarea" cols="80" rows="6"></textarea>
  <br />
  <hr />
  Credit Card Details:<br />
  * Type: <select name="cctype">
<option id="AM" value="amex">AMEX</option>
<option id="VI" value="visa">Visa</option>
<option id="MC" value="mastercard">MasterCard</option>
<option id="DC" value="dinersclub">Diners Club</option>
<option id="BC" value="bankcard">BankCard</option>
</select>
 * Expiry Date
 <select name="edmonth">
<option id="id1" value="01">01</option>
<option id="id2" value="02">02</option>
<option id="id3" value="03">03</option>
<option id="id4" value="04">04</option>
<option id="id5" value="05">05</option>
<option id="id6" value="06">06</option>
<option id="id7" value="07">07</option>
<option id="id8" value="08">08</option>
<option id="id9" value="09">09</option>
<option id="id10" value="10">10</option>
<option id="id11" value="11">11</option>
<option id="id12" value="12">12</option>
</select>

  <select name="edyear">
<option id="idi2006" value="2006">2006</option>
<option id="id2007" value="2007">2007</option>
<option id="id2008" value="2008">2008</option>
<option id="id2009" value="2009">2009</option>
</select>
 <hr />
<input type="submit" name="send" value="Submit" /> <input type="reset" value="Clear Form" /> 
</form>
<form method="get" action="">
<input type="submit" value="Help" onclick="openhelp();" />
</form>


<div align="center"> | <a href="contact.html" title="Contact Us">Contact Us</a> | <a href="html/copyright.html" title="Copyright" target="_blank">Copyright</a> | <a href="html/privacy.html" title="Privacy" target="_blank">Privacy</a> | <a href="mailto:grape_moosha@hotmail.com?subject=Joe's Website Query" title="Email The Web Administrator">Web Administrator</a> | 
</div> </div>


</body>
</html>

nasty.web · 05-09-2008, 10:02 AM

Simply prepend document to each form element call. For example, use:

Code:

document.orderform.pcode.value

instead of

Code:

orderform.pcode.value