Software

Question

Gravatar
0 Votes
Locked

Javascript validation works fine in chrome & F/fox but not in IE, why?

By agnidev108 ·
I have a web page that has javascript validation which works fine in both Chrome & firefox but does not work correctly in Internet Explorer. There is a radio button field that when checked requires further validation that a new address is entered, when all address fields are entered it should submit, only then. IE will not do this even though it validates . I have copied the code in below.
Can anyone please help & shed some light on this for me?

Thanks in advance.
Agni


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Joe's Orders1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
<script type="text/javascript">

//function to validate fields marked with *
//that are required to be filled out
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}


function validate_form(thisform)
{
with (thisform)
{
//validates all the fields that require input
//i.e. name, address postcode etc.

if (validate_required(name,"Name must be filled out!")==false)
{name.focus();return false;}
{
if (validate_required(address,"Address must be filled out!")==false)
{address.focus();return false;}
}
if (validate_required(suburb,"Suburb must be filled out!")==false)
{suburb.focus();return false;}
{
if (validate_required(postcode,"Postcode must be filled out!")==false)
{postcode.focus();return false;}
}
if (validate_required(homephone,"Home phone must be filled out!")==false)
{homephone.focus();return false;}
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
}
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false;}
{
if (validate_delivery(otheraddress)==true)
{otheraddress.checked();return false;}
}
if (validate_required(street,"Please complete the details!")==false)
{street.focus();return false;}
{
if (validate_required(suburbortown,"Suburb or town must be filled out!")==false)
{suburbortown.focus();return false;}
}
if (validate_required(postcode1,"Please fill out postcode!")==false)
{postcode1.focus();return false;}
{
if (validate_message(includecard)==true)
{includecard.checked();return false;}
}
if (validate_required(myMessage,"Please fill out message!")==false)
{myMessage.focus();return false;}

}
}
//This function is to validate the email address entered
//it must contain at least @ & .
//otherwise alert message will pop up

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
//This function validates that the include card has been checked,
//if checked there has been text entered into the myMessage field
//for form to be submitted

function validate_message(field,alerttxt)
{

with (field)
{
if (includecard.checked)
return false;
else {return true;}
}
}

//Function to validate numbers only are entered into
//numeric fields
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;

return true;
}
//validates Other address if radio button checked
//if radio button not checked validation not required
function validate_delivery(field,alerttxt)
{
with (field)
{
if (otheraddress.checked)
return false;
else {return true;}
}
}

</script>
</head>
<body style="margin:0" !-- set the page margin to '0' so our
layout table can fill the page -->
<table border="0" bgcolor="DAF7C3" cellspacing="0" width="100%" >
<tr>
<td colspan="5" height="80px">
<h1 align="center">
<font face="verdana" color="87F72B"> All produce at Joe's </font>
</h1>
<hr>
</td>
</tr>
<tr>
<td valign="top" width="140" height="100%">
<h5 align="center">
<font face="verdana"> Menu </font>
</h5>
<table border="0" bgcolor="DAF7C3" width="140" !-- displays imges in navigation bar left of the page -->
<tr>
<td><a href="Joe's Home Page.html"><img src="home.jpg" alt="Home" title="Home"></a></td>
</tr>
<tr>
<td><a href="Joe's Produce.html"><img src="produce.jpg" alt="Produce" title="Produce"></a></td>
</tr>
<tr>
<td><a href="Joe's History.html"><img src="history.jpg" alt="History" title="History"></a></td>
</tr>
<tr>
<td><a href="Joe's Orders.html"><img src="orders.jpg" alt="Orders" title="Orders"></a></td>
</tr>
<tr>
<td align="center"><font face="verdana">Links: </font></td>

</tr>
<tr>
<td align="center"><font face="verdana">
<a href="http://www.health.gov.au/internet/healthyactive/publishing.nsf/Content/healthy-eating" target="_blank">www.health.gov.au</a></font></td>

</tr>
</table>
</td>
<td valign="top" height="100%"><!-- main content for the order area -->
<table align="center" bgcolor="DAF7C3" border="0" width="600" >

<tr>
<td align="left"><font face="verdana">
<br>



<map name="order"><H4>Order form for Joe's Fruit Shop</h4><!-- order area -->
<H4>An * means you must fill in the details:</h4>
</map>

<map name="order">
<form action="submit.html" onsubmit="return validate_form(this)"id="orderForm">
* Name: <input type="text" id="name" value=""> <br><!-- enter personal details area -->
* Address: <input type="text" id="address" value="" size="40"><br>
* Suburb or Town: <input type="text" id="suburb" value="" size="15">
* State:
<select name="state">
<option value="QLD">QLD</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
<option value="WA">WA</option>
</select><br>
* Postcode: <input type="text" id="postcode" onkeypress="return isNumberKey(event)" value="" size="4" maxlength="4"><br>
* Home phone:<input type="number" id="homephone" onkeypress="return isNumberKey(event)" value="" size="10" maxlength="10">
Work phone:<input type="number" id="workphone" onkeypress="return isNumberKey(event)" value="" size="10" maxlength="10"><br>
Fax: <input type="number" id="fax" onkeypress="return isNumberKey(event)" value="" size="10" maxlength="10">
* Email address: <input type="text" id="email" value="" size="40">
<br>
<H4>Credit card details:</h4><!-- payment details area enter credit card etc -->
Type:
<select>
<option value="Visa">Visa</option>
<option value="Amex">Amex</option>
<option value="mastercard">Mastercard</option>

</select>
Expiry date:
<select>
<option value="jan">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select><br>
<H4>Purchase details:</h4><!-- purchase details area select product -->
*Basket choice:
<select>
<option value="fruitbox1A">Fruit box 1A</option>
<option value="fruitbox1B">Fruit box 1B</option>
<option value="fruitbox1C">Fruit box 1C</option>
<option value="fruitbox1D">Fruit box 1D</option>
<option value="vegebox2A">Vege box 2A</option>
<option value="vegebox2B">Vege box 2B</option>
<option value="vegebox2C">Vege box 2C</option>
<option value="vegebox2D">Vege box 2D</option>
</select>
Quantity:
<select><!-- purchase details area select the quantity -->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

</select><br>
<br>
*Deliver to:<br><!-- enter delivery details area -->
<br>
<input type="radio" name="homeaddress" value="Home address" checked id="homeaddress">Home address<br>
<br>
<input type="radio" name="homeaddress" value="Other address" id="otheraddress">Other address<br>
<br>
<input type="text" id="street" value="" size="40">(Street)<br>
<input type="text" id="suburbortown" value="">(Suburb or town)

<select>
<option value="QLD">QLD</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
<option value="WA">WA</option>
</select>(State)<br>
<input type="text" id="postcode1" onkeypress="return isNumberKey(event)" value="" maxlength="4" size="4">(Postcode)<br>
Date delivery required:<!-- enter date of delivery details area -->
<select>
<option value="">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
<option value="">06</option>
<option value="">07</option>
<option value="">08</option>
<option value="">09</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<select>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<select>

<option value="jan">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<br>
<br>
<!-- There is something weird going on here with the includecard.checked............... -->
Include a card:<input type="checkbox" id="includecard" value="">Yes<br><!-- card details area -->
<br>
Personal message on card:<br> <br>
<textarea name="myList" id="myMessage" rows="5" cols="30"></textarea><!-- customer can enter a message for the card here,
this area must be filled if the include card is checked, submit form should then process ok -->
<br><br>
Click on <b>Submit</b> when done; click on <b>Clear form</b> to restart.<br><br><!-- form submission area -->
<input type="submit" id="submit" value="Submit">
<input type="reset" id="reset" value="Clear form"><br>

</form>
</map>

<br>
</font><hr>

<br>
<br>
</td>
</tr>
<tr>

<td align="center"><font face=verdana>For more information email: <a href="mailto:info@joe's.com.au">info@joe's.com.au</a></font></td><!-- table headers -->
</tr>
<tr>
<td align="center">
<br>
<br>


<img src="fruit.jpg" width="170" height="113" alt="Fruit" usemap="#fruitmap">

<map name="fruitmap">
<area shape="rect" coords="0,0,56,56" href="Joe's Home Page.html" alt="Home" title="Home">
<area shape="rect" coords="57,57,113,113" href="Joe's Produce.html" alt="Produce" title="Produce">
<area shape="rect" coords="114,0,170,56" href="Joe's History.html" alt="History" title="History">
<area shape="rect" coords="117,65,169,112" href="Joe's Orders.html" alt="Orders" title="Orders">
</map>

<br>
<br>
<!--Displays the date & time this document was last modified -->
This document was last modified on:
<script type="text/javascript">
document.write(document.lastModified);
</script>


</td>
</tr>
</table>


</td>

</tr>


</table>

</Body>
</html>

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Answers

gravatar
Collapse -

Dude, learn how to post code in a forum.

by seanferd In reply to Javascript validation wor ...

And it's because MS uses their own craptastic jscript engine.

gravatar
Collapse -

ok?

by agnidev108 In reply to Dude, learn how to post c ...

So how do I get around this?
& dude how would I post code in a forum?

gravatar
Collapse -

A potential clue for you...

by christian.vigh In reply to Javascript validation wor ...

Well I will not spend time trying to suggest you there is a correct way to post html code on this forum... because I have not read the how-to's for that !

However, looking at the source code of your form, I noticed the following (but I don't know if it will solve the problem) :

onsubmit="return validate_form(this)"id="orderForm"

There is a space missing between the last quote of the onsubmit attribute and the id attribute ; so you should correct it so that it looks like :

onsubmit="return validate_form(this)" id="orderForm"

(with a space before the 'id=' attribute).

IE is more strict than Firefox on this kind of syntactic deviations.

With kind regards,
Christian.

gravatar
Collapse -

Thanks

by agnidev108 In reply to A potential clue for you. ...

Hi Christian,
Thanks kindly for taking the time to look & give advise.
best regards
Agni

Back to Software Forum

Start or search

Related Discussions

Related Forums