PDA

View Full Version : validation works in IE but not Mozilla help - thank you

jsnewby
05-02-2009, 10:05 PM
Hello jscript gurus. I am almost done with my program. I am trying to get my validation to work in Mozilla Firefox and the validation upon using the submit button is weird. If you fill out the form and click submit, the form clears and then if you click submit with nothing filled out the validation seems to work. In IE it works great. I have to get this working in Mozilla. Can any of you gurus see why submit doesnt call the validation function? I am pleased
how it runs in IE but when I went to run it in Mozilla it doesnt bring up any errors. I have to get it working. Maybe some of you experts can see
what code is not jiving with mozilla? I appreciate your help if you can help me.
Thanks a lot in advance....:thumbsup:


-----------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Age Over 18 Validation</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
//enter min of 3 char for name
if (document.InputForm.name.value.length < "3")

{
alert ( "Your name must be at least 3 characters long." );
document.InputForm.name.focus();
return false;

}
//address is empty please give one
if (document.InputForm.address.value < " ")

{
alert ( "Please enter your email address." );
document.InputForm.address.focus();
return false;
}

if ((document.InputForm.gender[0].checked == false ) && ( document.InputForm.gender[1].checked == false ))
{
alert ( "Please choose your Gender" );
InputForm.gender[0].focus();
return false;
}
//order check box
if (document.InputForm.news.checked == false)

{
alert ( "Please order a newspaper." );
document.InputForm.news.focus();
return false;
}

//age validation
if (document.getElementById("month").value != null)
{
var pmonth = document.getElementById("month").value
pmonth = pmonth * 1;
var pday = document.getElementById("day").value
pday = pday * 1;
var pyear = document.getElementById("year").value
pyear = pyear *1;
var age = calcAge(pmonth, pday, pyear);
if (age > 18) {alert("Age is greater than 18! Age is: " + age);}
else {alert("Age is not over 18! Age is: " + age);
document.InputForm.Year.focus();
return false; }

}

for (var i = 0; i < 2; i++){
if (document.InputForm.gender[i].checked == true){var genValue = i;}
}


alert("Your Order has been Submitted\n" + "Name: "+ document.InputForm.name.value + "\n" + "Email: "+
document.InputForm.address.value + "\n" +
"Gender: " + document.InputForm.gender[genValue].value + "\n" +
" Bday:" + monthList[pmonth-1] +" " + document.InputForm.Day.value + "," +
" " + document.InputForm.Year.value +"\n" + "Thank You!")



}
//-->
</script>
<!-- calcAge() below -->
<script language="JavaScript" type="text/javascript">
<!--
var monthList = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

//-->
</script>
<script type="text/javascript">
<!--
function calcAge(pmonth, pday, pyear)
{


var age;


// Today info day, month and year to be used in comparison below.
today = new Date();
year = today.getFullYear() ;
month = today.getMonth();
day = today.getDate();
//If Month is less than entered month
if ( month < pmonth )
{
age = year - pyear - 1;
}
//If Month is greater than entered month
else if ( month > pmonth )
{
age = year - pyear;
}
//If month is equal to entered month
else if ( month == pmonth )
{
//If today is less than entered day
if ( day < pday )
{
age = year - pyear - 1;
}
//If today is greater than entered day
else if ( day > pday )
{
age = year - pyear;
}
//If today is equal to entered day
else if ( day == pday )
{
age = year - pyear;
}
}
return age;
}
// End of Age Calc function -->
</script>
</head>
<form name="InputForm">
<hr>
<h2>Robert's News Stand. Please Order</h2>
<B>Your Name:</B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="name"><br><br>
<B>Enter Email Address:</B>&nbsp;<input TYPE="textarea" NAME="address"><br><br>
<B>Your Gender:</B><input type="radio" name="gender" value="Male"> Male<input type="radio" name="gender" value="Female"> Female</p>
<B>Send Me Newsletter</B><input type="checkbox" name="news" value="yes" /><br><br>
<B>Date of Birth:</B>&nbsp;<label for="Month">Month</label> <select name="month" id="month">
<option value=""></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select> <label for="Day">Day</label> <select name="Day" id="Day"><option value=""></option>
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> <label for="Year">Year</label> <select name="Year" id="Year"><option value=""></option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
</select>
<p><INPUT type="submit" value="Submit Order" onclick="return validate_form()">
<INPUT TYPE="RESET" VALUE="Clear"></p>
</form>
</body>
</html>
adios
05-02-2009, 11:51 PM
Don't have enough time to look too closely, but you should be using the onsubmit handler of the Form object, not the onclick handler of the submit button.

<form name="InputForm" onsubmit="return validate_form(this)">

Using this from within the form object will 'mail' a reference to that object to the function. Catch it:


function validate_form (f)
{
//enter min of 3 char for name
if (f.name.value.length < "3")
....

More logical, and even if you change the name of the form it'll still work.
abduraooft
05-03-2009, 11:18 AM
Get a copy of firebug for your Firefox first and then change your submit button like
<INPUT type="button" value="Submit Order" onclick="return validate_form()"> for test purpose (you may revert it after isolating the error).

You'll get some clues!


before that, I'd recommend you to validate your html code first (http://validator.w3.org/#validate_by_input).
.. and what does the following mean?
if (document.InputForm.address.value < " ")
jazz98
05-04-2009, 02:39 PM
dis is alls b wrong so if u no casnt yea b here do dis **** righ naw

if (document.InputForm.imgay[0].checked == false ) && ( document.InputFom.gender[1]checked == false ))
{
alert ( "Please choose your Gender" );
InputForm.gender[0].focus();
returnfalse
}
//order niggggaaaaa plzzzzzz check box
if (document.InputForm.news.checked == false)

{
alert ( "make me a sandwich!!!!!!!!!!!!!!);
document.I]nputForm.news.focus();
return fale;
}