html form validation with javascript
Question
i am working with simple form validation with javascript but its seems there is small glitch which tried to catch but i am unable to do it here is the code, the problem is that the select list doesn't gets validated i dont know 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>
5 answers
solution1
1 ACCPTED 2015-06-17 09:28:58
此处输入错误
if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.**vlaue**.length){
solution2
0 2015-06-17 09:23:14
You have a spelling mistake in your if statement
if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.vlaue.length){
replace email.vlaue.length with email.value.length
solution3
0 2015-06-17 09:29:57
The reason is, because you misspelled value at the email part.
Working JSFiddle: http://jsfiddle.net/v4qv7n7m/1/
Your code:
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{
Working code:
if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.value.length){
document.getElementById("emailerror").innerHTML = "please enter your email";
email.focus();
document.getElementById("emailerror").className = "error";
return false;
}else{
solution4
0 2015-06-17 09:31:05
typo here email.value.length
if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.value.length){
^^^^^^
}
solution5
0 2015-06-17 09:32:37
What you actually are looking for is to see if the select has a value.
Here is a revised edit of your code.
<p>Please Select a Security Question from the Drop Down List.<br />
<select name = "Security Question" id="securityQuestion">
<option></option>
<option value="m">What is your Mother's maiden name?</option>
<option value="p">What is the name of your pet?</option>
<option value="c">What is your favorite color?</option>
</select>
<input type="button" value="Click to Check" onClick="checkDropdown(1)" />
</p>
<script>
function checkDropdown () {
var securityQuestionElement = document.getElementById('securityQuestion');
if(!securityQuestionElement.value) {
window.alert('You must select a Security Question');
securityQuestionElement.value = 'm'
return false;
}
}
</script>
Key Differences
I am checking the select's value, not the option's "checked" status
I am selectingbyId, the browser indexes Ids early on (not sure about by name)
I am checking for the absence of a value, not if the value equals one of 3 cases. (cleaner/easier to read)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Form Validation in Html & Javascript?
HTML Javascript Form Validation
HTML form validation with Javascript
JavaScript validation in html form
JavaScript/HTML Form Validation
Form validation HTML & JAVASCRIPT
JavaScript and HTML form validation
Javascript and HTML form validation checks
html form validation using javascript
Javascript validation form not working with HTML
Related Tags