Javascript form validation is not working properly

JS is not working properly. I don't know why. can anyone help me? Here is my code...

function validate() {
    if(document.contactform.name.value==''){
        alert('Fill the Input name');
        name.focus();
        return false;
    }
    if(document.contactform.email.value==''){
        alert('Fill the Input email');
        email.focus();
        return false;
    }
    if(document.contactform.email.value!=''){
        if(!checkEmail(email.value)){
            alert('Please specify your correct Email!');
            email.focus();
            return false;           
        }       
    }
    if(document.contactform.mobile.value==''){
        alert('Fill the Input mobile');
        mobile.focus();
        return false;
    }
    if(document.contactform.mobile.value!=''){
        if(!IsNumeric(mobile.value)){
            alert('Please specify your correct Mobile Number!');
            mobile.focus();
            return false;           
        }       
    }
    if(document.contactform.subject.value==''){
        alert('Fill the Input Subject');
        subject.focus();
        return false;
    }   
    if(document.contactform.message.value==''){
        alert('Fill the Input description');
        message.focus();
        return false;
    }   
    if(!document.contactform.agree.checked){
        alert('Please check the terms and conditions'); 
        return false; 
    } 
    else{
        return true;
    }
}

Here is my html...

<form name="contactform" id="form" class="form" action="newmail.php" onsubmit="return validate();" method="post">
<TABLE align="center"  border="0">
 <TR><TD align="right"> <b>Name :</b></TD><TD align="left"><input type="text" name="name" id="name" /></TD></TR>
 <TR><TD align="right"> <b>Email :</b></TD><TD align="left"><input type="text" name="email" id="email" /></TD></TR> 
 <TR><TD align="right"> <b>Mobile :</b></TD><TD align="left"><input type="text" name="mobile" id="mobile" /></TD></TR> 
 <TR><TD align="right"> <b>subject :</b></TD><TD align="left"><input type="text" name="subject" id="subject" /></TD></TR> 
 <TR><TD align="right"> <b>Message :</b></TD><TD align="left"><textarea name='message' id='message'></textarea></TD></TR>
 <TR><TD colspan="2" align="center"><label for="agree"><input type="checkbox" name="agree" id="agree" checked="checked"> I agree to terms and Conditions</label> </TD></TR> 
 <TR><TD colspan="2" align="center"><input type="submit" value="Submit" class="submit" /> <开发者_StackOverflow中文版;/TD></TR>
</TABLE>
</form>

The code is not working for name field alone. It works fine if I comment the code of name filed. what could be wrong?? In my other form, textarea field alone is not working. In this form message field i.e textarea validation is working.

This is what happens. When I submit form, If name filed is empty, it shows alert and directly going to target page. If I comment the code for name validation, rest of the code works fine by alerting relevent errors.

Your form element has a name attribute.

You can't have an input element that is called name as well.

Does document.contactform.name refer to the form name or the input that you called name?

Change your input element to something else - fullname, for example, and use that in you javascript and you should be fine.

Your variables: name, email, mobile, subject, agree are all undefined. Except that IE creates global variables from elements with ID, but you shouldn't use it. Some browsers don't create those globals it. Here's how I would write your script;

function validate() {
    var name = document.getElementById('name');
    if(!name.value){
        alert('Fill the Input name');
        name.focus();
        return false;
    }

    var email = document.getElementById('email');
    if(!email.value){
        alert('Fill the Input email');
        email.focus();
        return false;
    }

    // No need to check if (email.value) again
    if(!checkEmail(email.value)){
        alert('Please specify your correct Email!');
        email.focus();
        return false;
    }

    var mobile = document.getElementById('mobile');
    if(!mobile.value){
        alert('Fill the Input mobile');
        mobile.focus();
        return false;
    }

    //No need to check if mobile.value again

    if(!IsNumeric(mobile.value)){
        alert('Please specify your correct Mobile Number!');
        mobile.focus();
        return false;
    }

    var subject = document.getElementById('subject');
    if(!subject.value){
        alert('Fill the Input Subject');
        subject.focus();
        return false;
    }

    var message = document.getElementById('message');
    if(!message.value){
        alert('Fill the Input description');
        message.focus();
        return false;
    }

    var agree = document.getElementById('agree');
    if(!agree.checked){
        alert('Please check the terms and conditions');
        return false;
    }

    // No need for an else here
    return true;
}

Referencing the form fields by the attribute of the form object will work if and only if the element doesn't match the name of another attribute.

"name" is an attribute for forms so
document.contactform.name.value is actually referring to the "name" attribute of the contact form, not the form element named "name".

Either rename your field to something else, like "fullname", or, ever better, use ids and document.getElementById to access your form fields.