i need to validate a form using only JavaScript
all the validations seem to work except that when it runs the function validateform() it doesn't return anything if all validations have been passed
<html>
<head>
<script language = "Javascript" type = "text/javascript">
function echeck(str)
{
var at = "@"
var dot = "."
var lat = str.indexOf(at)
var lstr = str.length
var ldot = str.indexOf(dot)
if (str.indexOf(at)==-1)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(at,(lat+1))!=-1)
{
alert("Invalid E-mail ID")
return false;
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(dot,(lat+2))==-1)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(" ")!=-1)
{
alert("Invalid E-mail ID")
return false;
}
return true;
}
function validateform()
{
var firstname = document.InputForm.firstname;
var middlename = document.InputForm.middlename;
var lastname = document.InputForm.lastname;
var nic = document.InputForm.nic;
var email = document.InputForm.email;
var phone = document.InputForm.phone;
var userid = document.InputForm.userid;
var pass1 = document.InputForm.pass1;
var pass2 = document.InputForm.pass2;
var dob = document.InputForm.dob;
var occupation = document.InputForm.occupation;
var which = document.InputForm.firstname;
var which2 = document.InputForm.middlename;
var which3 = document.InputForm.lastname;
var numericExpression = /^[0-9]+$/;
var message = document.getElementById('confirmMessage');
var goodColor = "green";
var badColor = "red";
var validformat=/^\d{2}\/\d{2}\/\d{4}$/;
var returnval=false;
if (firstname.value == "")
{
window.alert("Please enter your First Name.");
firstname.focus();
return false;
}
if (/[^a-z]/gi.test(which.value))
{
alert ("Only Alphabets Are Valid In This Field");
which.value = "";
which.focus();
return false;
}
if (middlename.value == "")
{
window.alert("Please enter your Middle Name.");
middlename.focus();
return false;
}
if (/[^a-z]/gi.test(which2.value))
{
alert ("Only Alphabets Are Valid In This Field");
which2.value = "";
which2.focus();
return false;
}
if (lastname.value == "")
{
window.alert("Please enter your Last Name.");
lastname.focus();
return false;
}
if (/[^a-z]/gi.test(which3.value))
{
alert ("Only Alphabets Are Valid In This Field");
which3.value = "";
which3.focus();
return false;
}
if (nic.value == "")
{
window.alert("Please enter your National Identity Card Number.");
nic.focus();
return false;
}
if (email.value == "")
{
alert("Please Enter your Email Address")
email.focus()
return false
}
if (echeck(email.value)==false)
{
email.value=""
email.focus()
return false;
}
if (phone.value == "")
{
window.alert("Please enter your Phone Number.");
phone.focus();
return false;
}
if (!phone.value.match(numericExpression))
{
alert("Phone Number Must Consists of Only Numbers");
phone.focus();
return false;
}
if (phone.value.length != 7)
{
alert("Phone Number MUST consist of 7 numbers");
phone.focus();
return false;
}
if (userid.value == "")
{
window.alert("Please enter A User ID.");
userid.focus();
return false;
}
if (pass1.value == "")
{
window.alert("Please enter A Password.");
pass1.focus();
return false;
}
if (pass2.value == "")
{
window.alert("Please Reenter the password.");
pass2.focus();
return false;
}
if (pass1.value == pass2.value)
{
pass2.style.backgroundColor = goodColor;
message.style.color = goodColor;
message.innerHTML = "Passwords Match!"
}
if (pass1.value != pass2.value)
{
pass2.style.backgroundColor = badColor;
message.style.color = badColor;
message.innerHTML = "Passwords Do Not Match!"
window.alert("Passwords Do Not Match.");
pass1.focus();
return false;
}
myOption = -1;
for (i=InputForm.sex.length-1; i > -1; i--)
{
if (InputForm.sex[i].checked)
{
myOption = i;
i = -1;
}
}
if (myOption == -1)
{
window.alert('You must select either male or female');
return false;
}
if (dob.value == "")
{
window.alert("Please enter your Date Of Birth.");
dob.focus();
return false;
}
if (!validformat.test(dob.value))
{
alert("Invalid Date......Should be in the format 'dd/mm/yyyy.'");
}
if (validformat.test(dob.value))
{
var dayfield=dob.value.split("/")[0];
var monthfield=dob.value.split("/")[1];
var yearfield=dob.value.split("/")[2];
var dayobj = new Date(yearfield, monthfield-1, dayfield);
if ((dayobj.getDate()!=dayfield)||(dayobj.getMonth()+1!=monthfield)||(dayobj.getFullYear()!=yearfield))
{
alert("Invalid Date......Should be in the format 'dd/mm/yyyy.'");
}
}
if (returnval==false) dob.select()
{
return returnval;
}
if (occupation.value == "")
{
window.alert("Please enter your Occupation.");
occupation.focus();
return false;
}
return window.alert('Registration was Successfull');
}
function allowReset()
{
return window.confirm('Do you really want to clear this form?')
}
</script>
</head>
<body>
<table border = "0">
<form name = "InputForm" onSubmit = "return validateform();" onReset = "return allowReset()" method = "post" action = "http://www.google.com">
<tr>
<td> First Name </td>
<td> <input type = "text"
name = "firstname"
size = "20">
</td>
</tr>
<tr>
<td> Middle Name </td>
<td> <input type = "text"
name = "middlename"
size = "20">
</td>
</tr>
<tr>
<td> Last Name </td>
<td> <input type = "text"
name = "lastname"
size = "20">
</td>
</tr>
<tr>
<td> NIC </td>
<td> <input type = "text"
name = "nic"
id = "nic"
size = "15">
</td>
</tr>
<tr>
<td> Email Address </td>
<td> <input type = "text"
name = "email"
id = "email"
size = "30">
</td>
</tr>
<tr>
<td> Phone Number </td>
<td> <input type = "text"
name = "phone"
id = "phone"
size = "7">
</td>
</tr>
<tr>
<td> User ID </td>
<td> <input type = "text"
name = "userid"
size = "15">
</td>
</tr>
<tr>
<td> Password </td>
<td> <input type = "password"
name = "pass1"
id = "pass1">
</td>
</tr>
<tr>
<td> Confirm Password </td>
<td> <input type = "password"
name = "pass2"
id = "pass2"
onblur = "comparison();">
<span id = "confirmMessage" class = "confirmMessage"> </span>
</td>
</tr>
<tr>
<td> Sex </td>
<td > <input type = "radio"
name = "sex"
value = "male"
onClick = "window.alert('You selected Male')">
<b><font color = "white"> Male </font></b>
<br>
<input type = "radio"
name = "sex"
value = "female"
onClick = "window.alert('You selected Female')">
<b><font color = "white"> Female </font></b>
</td>
</tr>
<tr>
<td> Date of Birth </td>
<td>
<input type = "text"
name = "dob"
size = "10"
value = "dd/mm/yyyy"
onFocus = "if(dob.value.toLowerCase()=='dd/mm/yyyy') dob.value= '' ";>
</td>
</tr>
<tr>
<td> Country </td>
<td> <select tabindex = "7" name = country id = "countryId" onChange = "javascript:onCountryChange()">
<option value = selected> -[select]- </option>
<option value='CA'> Canada </option>
<option value='DE'> Germany </option>
<option value='AU'> Australia</option>
<option value='JP'> Japan </option>
<option value='AF'> Afghanistan </option>
<option value='AL'> Albania </option>
<option value='DZ'> Algeria </option>
<option value='AS'> American Samoa </option>
<option value='AD'> Andorra </option>
<option value='AO'> Angola </option>
<option value='AI'> Anguilla </option>
<option value='AQ'> Antarctica </option>
<option value='AG'> Antigua and Barbuda </option>
<option value='AR'> Argentina </option>
<option value='AM'> Armenia </option>
<option value='AW'> Aruba </option>
<option value='AU'> Australia </option>
<option value='AT'> Austria </option>
<option value='AZ'> Azerbaijan </option>
<option value='BS'> Bahamas </option>
<option value='BH'> Bahrain </option>
<option value='BD'> Bangladesh </option>
<option value='BB'> Barbados </option>
<option value='BY'> Belarus </option>
<option value='BE'> Belgium </option>
<option value='BZ'> Belize </option>
<option value='BJ'> Benin </option>
<option value='BM'> Bermudav </option>
<option value='BT'> Bhutanv </option>
<option value='BO'> Bolivia </option>
<option value='BA'> Bosnia/Herzegowina </option>
<option value='BW'> Botswana </option>
<option value='BV'> Bouvet Island </option>
<option value='BR'> Brazil </option>
<option value='IO'> British Ind Ocean Ter </option>
<option value='BN'> Brunei Darussalam </option>
<option value='BG'> Bulgaria </option>
<option value='BF'> Burkina Faso </option>
<option value='BI'> Burundi </option>
<option value='KH'> Cambodia </option>
<option value='CM'> Cameroon </option>
<option value='CA'> Canada </option>
<option value='CV'> Cape Verde </option>
<option value='KY'> Cayman Islands </option>
<option value='CF'> Central African Rep </option>
<option value='TD'> Chad </option>
<option value='CL'> Chile </option>
<option value='CN'> China </option>
<option value='CX'> Christmas Island </option>
<option value='CC'> Cocos Islands </option>
<option value='CO'> Colombia </option>
<option value='KM'> Comoros </option>
<option value='CG'> Congo </option>
<option value='CD'> Congo Democratic Rep </option>
<option value='CK'> Cook Islands </option>
<option value='CR'> Costa Rica </option>
<option value='CI'> Cote D'Ivoire </option>
<option value='HR'> Croatia </option>
<option value='CU'> Cuba </option>
<option value='CY'> Cyprus </option>
<option value='CZ'> Czech Republic </option>
<option value='DK'> Denmark </option>
<option value='DJ'> Djibouti </option>
<option value='DM'> Dominica </option>
<option value='DO'> Dominican Republic </option>
<option value='EC'> Ecuador </option>
<option value='EG'> Egypt </option>
<option value='SV'> El Salvador </option>
<option value='GQ'> Equatorial Guinea </option>
<option value='ER'> Eritrea </option>
<option value='EE'> Estonia </option>
<option value='ET'> Ethiopia </option>
<option value='FK'> Falkland Islands </option>
<option value='FO'> Faroe Islands </option>
<option value='FJ'> Fiji </option>
<option value='FI'> Finland </option>
<option value='FR'> France </option>
<option value='GF'> French Guiana </option>
<option value='PF'> French Polynesia </option>
<option value='TF'> French Southern Ter </option>
<option value='GA'> Gabon </option>
<option value='GM'> Gambia </option>
<option value='GE'> Georgia </option>
<option value='DE'> Germany </option>
<option value='GH'> Ghana </option>
<option value='GI'> Gibraltar </option>
<option value='GR'> Greece </option>
<option value='GL'> Greenland </option>
<option value='GD'> Grenada </option>
<option value='GP'> Guadeloupe </option>
<option value='GU'> Guam </option>
<option value='GT'> Guatemala </option>
<option value='GN'> Guinea </option>
<option value='GW'> Guinea Bissau </option>
<option value='GY'> Guyana </option>
<option value='HT'> Haiti </option>
<option value='HM'> Heard And McDonald Is </option>
<option value='HN'> Honduras </option>
<option value='HK'> Hong Kong </option>
<option value='HU'> Hungary </option>
<option value='IS'> Iceland </option>
<option value='IN'> India </option>
<option value='ID'> Indonesia </option>
<option value='IR'> Iran </option>
<option value='IQ'> Iraq </option>
<option value='IE'> Ireland </option>
<option value='IM'> Isle of Man </option>
<option value='IL'> Israel </option>
<option value='IT'> Italy </option>
<option value='JM'> Jamaica </option>
<option value='JP'> Japan </option>
<option value='JO'> Jordan </option>
<option value='KZ'> Kazakhstan </option>
<option value='KE'> Kenya </option>
<option value='KI'> Kiribati </option>
<option value='KP'> Korea Dem People's Rep </option>
<option value='KR'> Korea Republic </option>
<option value='KW'> Kuwait </option>
<option value='KG'> Kyrgyzstan </option>
<option value='LA'> Lao People's Dem Rep </option>
<option value='LV'> Latvia </option>
<option value='LB'> Lebanon </option>
<option value='LS'> Lesotho </option>
<option value='LR'> Liberia </option>
<option value='LY'> Libyan Arab Jamahiriya </option>
<option value='LI'> Liechtenstein </option>
<option value='LT'> Lithuania </option>
<option value='LU'> Luxembourg </option>
<option value='MO'> Macau </option>
<option value='MK'> Macedonia </option>
<option value='MG'> Madagascar </option>
<option value='MW'> Malawi </option>
<option value='MY'> Malaysia </option>
<option value='MV'> Maldives </option>
<option value='ML'> Mali </option>
<option value='MT'> Malta </option>
<option value='MH'> Marshall Islands </option>
<option value='MQ'> Martinique </option>
<option value='MR'> Mauritania </option>
<option value='MU'> Mauritius </option>
<option value='YT'> Mayotte </option>
<option value='MX'> Mexico </option>
<option value='FM'> Micronesia </option>
<option value='MD'> Moldova, Republic Of </option>
<option value='MC'> Monaco </option>
<option value='MN'> Mongolia </option>
<option value='ME'> Montenegro </option>
<option value='MS'> Montserrat </option>
<option value='MA'> Morocco </option>
<option value='MZ'> Mozambique </option>
<option value='MM'> Myanmar </option>
<option value='NA'> Namibia </option>
<option value='NR'> Nauru </option>
<option value='NP'> Nepal </option>
<option value='NL'> Netherlands </option>
<option value='AN'> Netherlands Antilles </option>
<option value='NC'> New Caledonia </option>
<option value='NZ'> New Zealand </option>
<option value='NI'> Nicaragua </option>
<option value='NE'> Niger </option>
<option value='NG'> Nigeria </option>
<option value='NU'> Niue </option>
<option value='NF'> Norfolk Island </option>
<option value='MP'> Northern Mariana Islands </option>
<option value='NO'> Norway </option>
<option value='OM'> Oman </option>
<option value='PK'> Pakistan </option>
<option value='PW'> Palau </option>
<option value='PS'> Palestine </option>
<option value='PA'> Panama </option>
<option value='PG'> Papua New Guinea </option>
<option value='PY'> Paraguay </option>
<option value='PE'> Peru </option>
<option value='PH'> Philippines </option>
<option value='PN'> Pitcairn Island </option>
<option value='PL'> Poland </option>
<option value='PT'> Portugal </option>
<option value='PR'> Puerto Rico </option>
<option value='QA'> Qatar </option>
<option value='RE'> Reunion </option>
<option value='RO'> Romania </option>
<option value='RU'> Russian Federation </option>
<option value='RW'> Rwanda </option>
<option value='KN'> Saint Kitts And Nevis </option>
<option value='LC'> Saint Lucia </option>
<option value='VC'> Saint Vincent/Grenadines </option>
<option value='WS'> Samoa </option>
<option value='SM'> San Marino </option>
<option value='ST'> Sao Tome and Principe </option>
<option value='SA'> Saudi Arabia </option>
<option value='SN'> Senegal </option>
<option value='RS'> Serbia </option>
<option value='SC'> Seychelles </option>
<option value='SL'> Sierra Leones </option>
<option value='SG'> Singapore </option>
<option value='SK'> Slovakia (Slovak Republic) </option>
<option value='SI'> Slovenia </option>
<option value='SB'> Solomon Islands </option>
<option value='SO'> Somalia </option>
<option value='ZA'> South Africa </option>
<option value='GS'> South Georgia/S Sandwich Is </option>
<option value='ES'> Spain </option>
<option value='LK'> Sri Lanka </option>
<option value='SH'> St Helena </option>
<option value='PM'> St Pierre and Miquelon </option>
<option value='SD'> Sudan </option>
<option value='SR'> Suriname </option>
<option value='SJ'> Svalbard/Jan Mayen Islands </option>
<option value='SZ'> Swaziland </option>
<option value='SE'> Sweden </option>
<option value='CH'> Switzerland </option>
<option value='SY'> Syrian Arab Republic </option>
<option value='TW'> Taiwan </option>
<option value='TJ'> Tajikistan </option>
<option value='TZ'> Tanzania United Republic of </option>
<option value='TH'> Thailand </option>
<option value='TG'> Togo </option>
<option value='TK'> Tokelau </option>
<option value='TO'> Tonga </option>
<option value='TT'> Trinidad and Tobago </option>
<option value='TN'> Tunisia </option>
<option value='TR'> Turkey </option>
<option value='TM'> Turkmenistan </option>
<option value='TC'> Turks And Caicos Islands </option>
<option value='TV'> Tuvalu </option>
<option value='UM'> US Minor Outlying Is </option>
<option value='UG'> Uganda </option>
<option value='UA'> Ukraine </option>
<option value='AE'> United Arab Emirates </option>
<option value='GB'> United Kingdom </option>
<option value='US'> United States </option>
<option value='UY'> Uruguay </option>
<option value='UZ'> Uzbekistan </option>
<option value='VU'> Vanuatu </option>
<option value='VA'> Vatican City State </option>
<option value='VE'> Venezuela </option>
<option value='VN'> Viet Nam </option>
<option value='VG'> Virgin Islands British </option>
<option value='VI'> Virgin Islands US </option>
<option value='WF'> Wallis/Futuna Islands </option>
<option value='EH'> Western Sahara </option>
<option value='YE'> Yemen </option>
<option value='ZM'> Zambia </option>
<option value='ZW'> Zimbabwe </option>
</select>
<script language="javascript">
function onCountryChange() {
var countryStateArray = [
[
'US',
[
['','-[select]-'],
['AL','Alabama'],
['AK','Alaska'],
['AZ','Arizona'],
['AR','Arkansas'],
['AA','Armed Forces Americas'],
['AE','Armed Forces Other (AE)'],
['AP','Armed Forces Pacific'],
['CA','California'],
['CO','Colorado'],
['CT','Connecticut'],
['DE','Delaware'],
['DC','District of Columbia'],
['FL','Florida'],
['GA','Georgia'],
['HI','Hawaii'],
['ID','Idaho'],
['IL','Illinois'],
['IN','Indiana'],
['IA','Iowa'],
['KS','Kansas'],
['KY','Kentucky'],
['LA','Louisiana'],
['ME','Maine'],
['MD','Maryland'],
['MA','Massachusetts'],
['MI','Michigan'],
['MN','Minnesota'],
['MS','Mississippi'],
['MO','Missouri'],
['MT','Montana'],
['NE','Nebraska'],
['NV','Nevada'],
['NH','New Hampshire'],
['NJ','New Jersey'],
['NM','New Mexico'],
['NY','New York'],
['NC','North Carolina'],
['ND','North Dakota'],
['OH','Ohio'],
['OK','Oklahoma'],
['OR','Oregon'],
['PA','Pennsylvania'],
['RI','Rhode Island'],
['SC','South Carolina'],
['SD','South Dakota'],
['TN','Tennessee'],
['TX','Texas'],
['UT','Utah'],
['VT','Vermont'],
['VA','Virginia'],
['WA','Washington'],
['WV','West Virginia'],
['WI','Wisconsin'],
['WY','Wyoming']],
],
[
'CA',
[
['','-[select]-'],
['AB','Alberta'],
['BC','British Columbia'],
['MB','Manitoba'],
['NB','New Brunswick'],
['NF','Newfoundland'],
['NT','Northwest Territories'],
['NS','Nova Scotia'],
['NU','Nunavut'],
['ON','Ontario'],
['PE','Prince Edward Island'],
['QC','Quebec'],
['SK','Saskatchewan'],
['YT','Yukon']],
],
[
'AU',
[
['','-[select]-'],
['ACT','Australian Capital Terr.'],
['NSW','New South Wales'],
['NT','Northern Territory'],
['QLD','Queensland'],
['SA','South Australia'],
['TAS','Tasmania'],
['VIC','Victoria'],
['WA','Western Australia']]
]
];
var countryObj = document.getElementById('countryId');
var stateObj = document.getElementById('stateId');
if(countryObj && stateObj) {
var stateList = [['XX', 'None']];
var curCountry = countryObj.options[countryObj.selectedIndex].value;
var pattern = '';
for (var i=0; i < countryStateArray.length; i++){
if (curCountry == countryStateArray[i][0]){
stateList = countryStateArray[i][1];
}
}
var selectedState;
for (var i = 0; i < stateObj.length; i++){
if (stateObj.options[i].selected == true){
selectedState = stateObj.options[i].value;
}
}
stateObj.options.length = 0;
for (var i = 0; i < stateList.length; i++){
stateObj.options[i] = new Option(stateList[i][1], stateList[i][0]);
if (stateList[i][0] == selectedState){
stateObj.options[i].selected = true;
}
}
}
}
</script>
<script language = "javascript">
function onStateChange() {
var scountryObj = document.getElementById('countryId');
var sstateObj = document.getElementById('stateId');
if (sstateObj.options.length > 55){
if(scountryObj && sstateObj) {
var scurCountry = scountryObj.options[scountryObj.selectedIndex].value;
var scurState = sstateObj.options[sstateObj.selectedIndex].value;
var spattern = '';
if (sstateObj.selectedIndex < 58) {
spattern = 'US';
}
else if (sstateObj.selectedIndex < 69) {
spattern = 'AU';
}
else {
spattern = 'CA';
}
var re = new RegExp('^' + spattern, 'i');
for(i = 0; i<scountryObj.options.length; i++) {
if(scountryObj.options[i].value.match(re)) scountryObj.selectedIndex = i;
if(scountryObj.options[scountryObj.selectedIndex].value == spattern) break;
}
}
}
}
</script>
</td>
</tr>
<tr>
<td> State </td>
<td> <select tabindex = "6" name = state id = "stateId" onChange = "javascript:onStateChange()" onblur = "state();">
<option value=''> -[select]- </option>
</select>
</td>
</tr>
<tr>
<td> Occupation </td>
<td> <input type = "text"
name = "occupation"
size = "20">
</td>
</tr>
<tr>
<td> Interests </td>
<td> <input type = "checkbox"
name = "sports">
<b><font color = "white"> Sports </font></b>
<br>
<input type = "checkbox"
name = "travelling">
<b><font color = "white"> Travelling </font></b>
<br>
<input type = "checkbox"
name = "shopping">
<b><font color = "white"> Shopping </font></b>
<br>
<input type = "checkbox"
name = "games">
<b><font color = "white"> Video Games </font></b>
</td>
</tr>
<tr>
<td colspan = "2"> <p align = "center">
<input type = "submit"
value = "Submit">
<input type = "reset"
value = "Reset">
</p>
</td>
</tr>
</form>
</table>
</body>
</html>