JavaScript表单验证无法正常工作

Question

JS无法正常工作。 我不知道为什么 谁能帮我？ 这是我的代码...

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;
    }
}

这是我的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" /> </TD></TR>
</TABLE>
</form>

该代码不能单独用于名称字段。 如果我评论提交的名称代码，它会很好地工作。 有什么问题吗？ 在我的另一种形式中，仅textarea字段不起作用。 在此表单中，消息字段即textarea验证正在运行。

这就是发生的情况。 当我提交表单时，如果名称字段为空，则显示警报并直接进入目标页面。 如果我注释代码以进行名称验证，则其余代码会通过提醒相关事件错误来正常工作。

Answer 1

您的表单元素具有name属性。

您也不能有一个名为name的input元素。

document.contactform.name是否引用表单名称或您称为name的输入？

将输入元素更改为其他名称-例如fullname ，然后在javascript中使用该元素，就可以了。

Answer 2

您的变量： name ， email ， mobile ， subject ， agree均未定义。 IE会从具有ID的元素中创建全局变量，但您不应使用它。 有些浏览器不会创建全局变量。 这是我编写脚本的方式；

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;
}

Answer 3

当且仅当元素与另一个属性的名称不匹配时，才能通过form对象的属性引用表单字段。

“名称”是表单的属性，因此
document.contactform.name.value实际上是指联系人表单的“ name”属性，而不是名为“ name”的表单元素。

可以将您的字段重命名为其他名称，例如“全名”，或者更好的是，使用id和document.getElementById来访问表单字段。