I encountered a small glitch while working on simple form validation with JavaScript. I tried to catch the issue but have been unable to do so. Here is the code snippet, where the problem lies in the fact that the select list does not get validated and I'm unsure why.
<html>
<head>
<title>Mobile Phone Prices In Pakistan </title>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id="theform" name"form1">
<p>Name:
<input type="text" name="username" id="username" />
<span id="nameerror"></span>
</p>
<p>
Email:
<input type="text" name="email" id="email" />
<span id="emailerror"></span>
</p>
<p>
Country:
<select name="country" id="country">
<option value="0">choose your country </option>
<option value="pk">pakistan</option>
<option value="ind">India</option>
<option value="afg">afghanistan</option>
<option value="irn">Iran</option>
</select>
<span id="countryerror"></span>
</p>
<p>
Gender
</p>
<p>Male
<input type="radio" name="gender" id="radio" value="radio">
<span id="gendererror"></span>
Femal
<input type="radio" name="gender" id="radio2" value="radio2">
</p>
<p>
<input type="checkbox" name="rules" id="rules">
Accept our rules and regulation to continue with form process
</p>
<p>
<input type="submit" name="button" id="submit" value="register" >
</p>
</form>
<script type="text/javascript">
document.getElementById("theform").onsubmit = validate;
document.getElementById("submit").disabled = true;
var rules = document.getElementById("rules");
rules.onclick = function (){
if(rules.checked){
document.getElementById("submit").disabled = false;
}else{
document.getElementById("submit").disabled = true;
}
}
function validate(){
var username = document.getElementById("username");
var email = document.getElementById("email");
var country = document.getElementById("country");
var radio1 = document.getElementById("radio");
var radio2 = document.getElementById("radio2");
var atpos = email.value.indexOf("@");
var dotpos = email.value.lastIndexOf(".");
if(username.value == "" && username.value.length == 0){
document.getElementById("nameerror").innerHTML = "please enter your name";
username.focus();
document.getElementById("nameerror").className = "error";
return false;
}else{
document.getElementById("nameerror").innerHTML = "";
document.getElementById("nameerror").className= "";
}
if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.vlaue.length){
document.getElementById("emailerror").innerHTML = "please enter your email";
email.focus();
document.getElementById("emailerror").className = "error";
return false;
}else{
document.getElementById("emailerror").innerHTML = "";
document.getElementById("emailerror").className= "";
}
if(country.selectedIndex == 0){
document.getElementById("countryerror").innerHTML = "please choose country";
document.getElementById("countryerror").className = "error";
return false;
}else{
document.getElementById("countryerror").innerHTML = "";
document.getElementById("countryerror").className = "";
}
if(radio1.checked == false && radio2.checked == false){
alert("please choose your gender");
return false;
}
}
</script>
</body>
</html>