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属性。

您也不能拥有名为input的{{1}}元素。

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

例如，将您的输入元素更改为其他内容 - name，并在您的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

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

“name”是表格的属性，所以
document.contactform.name.value实际上是指联系表单的“name”属性，而不是名为“name”的表单元素。

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

Javascript表单验证无法正常工作

3 个答案: