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>

Can you make a JSFiddle put of this ?

Vigneswaran Marimuthu
– Vigneswaran Marimuthu

2015-06-17 09:23:25 +00:00
Commented Jun 17, 2015 at 9:23 — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Jun 17, 2015 at 9:23
You can use value instead of selectedIndex

Vigneswaran Marimuthu
– Vigneswaran Marimuthu

2015-06-17 09:24:10 +00:00
Commented Jun 17, 2015 at 9:24 — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Jun 17, 2015 at 9:24
ok here is jsfiddle jsfiddle.net/Ldr3f5pw

raziq
– raziq

2015-06-17 09:26:52 +00:00
Commented Jun 17, 2015 at 9:26 — raziq
– raziq, Commented Jun 17, 2015 at 9:26
Typo in your code. email.vlaue.length

Vigneswaran Marimuthu
– Vigneswaran Marimuthu

2015-06-17 09:31:28 +00:00
Commented Jun 17, 2015 at 9:31 — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Jun 17, 2015 at 9:31

Liem Do · Accepted Answer · 2015-06-17 09:28:58Z

1

Mistyped here

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.**vlaue**.length){

answered Jun 17, 2015 at 9:28

Liem Do

9411 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cagatay Ulubay · Accepted Answer · 2015-06-17 09:29:57Z

0

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{

answered Jun 17, 2015 at 9:29

Cagatay Ulubay

2,5591 gold badge17 silver badges26 bronze badges

Comments

Nagaraj S · Accepted Answer · 2015-06-17 09:31:05Z

0

typo here email.value.length

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.value.length){
                                                      ^^^^^^

}

http://jsfiddle.net/Ldr3f5pw/

answered Jun 17, 2015 at 9:31

Nagaraj S

13.5k6 gold badges35 silver badges53 bronze badges

Comments

Jaffer Wilson · Accepted Answer · 2015-06-17 09:32:37Z

0

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)

answered Jun 17, 2015 at 9:32

Jaffer Wilson

7,30313 gold badges77 silver badges161 bronze badges

1 Comment

raziq Over a year ago

upvote require 15 reputation .. sorry dude if i could i would for sure thanks again

sonam gupta · Accepted Answer · 2015-06-17 09:37:23Z

0

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

edited Jun 17, 2015 at 9:37

answered Jun 17, 2015 at 9:23

sonam gupta

7856 silver badges17 bronze badges

Collectives™ on Stack Overflow

html form validation with javascript

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related