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

當且僅當該元素與另一個屬性的名稱不匹配時，通過表單對象的屬性引用表單字段纔有效。

「名稱」是用於形成這樣
document.contactform.name.value實際上是指接觸形式的「name」屬性，而不是命名爲「名稱」的形式的元素的屬性。

要麼將​​您的字段重命名爲其他名稱，比如「全名」，或者更好的是使用ids和document.getElementById來訪問您的表單字段。