表單提交儘管JavaScript驗證返回false並顯示警報消息

Question

我有一個表格要填寫的用戶，空字段將提示JavaScript驗證返回一條消息填寫該特定字段。我能夠完成這一切，除了儘管返回「警報」消息，表單被提交。我如何避免這種情況？這裏是我的JavaScript：

function validateHandAppr(theForm) { 

    // Recom or Not Recom 
    if (document.project.rec.selectedIndex == 0) { 
     alert("Please Choose the Recommendation Priority ."); 
     project.rec.focus(); 
     return false; 
    } 

    // Recommended priorities 
    if (document.project.rec.selectedIndex == 2 && document.project.recvd_dt.value == "") { 

     alert("Fill in the date when culture was received."); 
     project.recvd_dt.focus(); 
     return false; 
    } 

    if (document.project.rec.selectedIndex == 2 && document.project.recvd_by.value == "") { 

     alert("Specify who received the culture."); 
     project.recvd_by.focus(); 
     return false; 
    } 


    if (document.project.rec.selectedIndex == 2 && document.project.recvd_dt.value != "") { 
     var validformat = /^\d{4}\-\d{2}\-\d{2}$/; //.test(project.recvd_dt.value) //Basic check for format validity 

     if (!validformat.test(project.recvd_dt.value)) { 
      alert("Invalid Date Format. Please enter in the following format: yyyy-mm-dd.") 
      return false; 
     } else { //Detailed check for valid date ranges 
      var yearfield = project.recvd_dt.value.split("-")[0] 
      var monthfield = project.recvd_dt.value.split("-")[1] 
      var dayfield = project.recvd_dt.value.split("-")[2] 
      var dayobj = new Date(yearfield, monthfield - 1, dayfield) 
      if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield)) { 
       alert("Invalid Day, Month, or Year range detected. Please correct and submit again.") 
       return false; 
      } else { 
       return true; 
      } 
     } 
    } 
} 

以下是其中的JavaScript被稱爲形式：繼

<form accept-charset="UTF-8" id="project" name="project" 
     action="hand_submit_forms.php" method="post" 
     onSubmit="return validateHandAppr(this)" 
     class="user-info-from-cookie" enctype="multipart/form-data"> 

被更新的代碼，按照由DaveRandom建議：

 function validateHandAppr(theForm) { 

    // Recom or Not Recom 
    //var val=true; 
     if (document.project.rec.selectedIndex == 0) 
     { 
      alert ("Please Choose the Recommendation Priority ."); 
     document.project.rec.focus(); 
      return false; 
     } 



    // Recommended priorities 
     if (document.project.rec.selectedIndex ==2 && document.project.recvd_dt.value == "") 
     { 

      alert("Fill in the date when culture was received."); 
     document.project.recvd_dt.focus(); 
     return false; 
    } 

     if (document.project.rec.selectedIndex ==2 && document.project.recvd_by.value == "") 
    { 

    alert("Specify who received the culture."); 
    document.project.recvd_by.focus(); 
    return false; 
    } 


    if (document.project.rec.selectedIndex ==2 && document.project.recvd_dt.value != ""){ 
     var validformat=/^\d{4}\-\d{2}\-\d{2}$/ ; //.test(project.recvd_dt.value) //Basic check for format validity 

     if (!validformat.test(project.recvd_dt.value)) 
     { 
     alert("Invalid Date Format. Please enter in the following format: yyyy-mm-dd.") 
     return false; 
     } 
     else{ //Detailed check for valid date ranges 
     var yearfield=project.recvd_dt.value.split("-")[0] 
     var monthfield=project.recvd_dt.value.split("-")[1] 
     var dayfield=project.recvd_dt.value.split("-")[2] 
     var dayobj = new Date(yearfield, monthfield-1, dayfield) 
     if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield)) 
     { 
     alert("Invalid Day, Month, or Year range detected. Please correct and submit again.") 
     return false;} 
     else 
     { 
     return true; } 
     } 
    } 

    // return val; 
     } 

Answer 1

的問題是這些行：

project.rec.focus(); 
// ... 
project.recvd_dt.focus(); 
// ... 
project.recvd_by.focus(); 

您的驗證條件參考document.project，但上述各行代表的僅僅是project - 由於它是document的子項而不是window的子項，因此您沒有在本地聲明它。

因爲這些行在alert()行和return false;行之間，您將看到警報，但返回語句永遠不會到達 - 所以函數不會返回false並且將提交表單。

如果更改行：

document.project.rec.focus(); 
// ... 
document.project.recvd_dt.focus(); 
// ... 
document.project.recvd_by.focus(); 

...它應該工作。

然而

你應該將功能分配到<form>的DOM對象的submit事件，而不是使用內聯事件處理程序。

如果您這樣做，您將傳遞一個事件對象到該函數的第一個參數，並且您可以使用event.preventDefault()而不是返回false。這樣可以避免這個問題（如果在錯誤發生之前放置該行），並且通常是更好的方法來處理這個問題，因爲返回false也會停止事件的傳播，這可能不是所期望的 - 實際上，這在這方面幾乎沒有什麼區別具體的情況，但作爲一般規則，這是事實。

如果這樣做，處理程序將在DOM對象的上下文中執行 - 因此this變量將作爲對它的引用，並且不需要將它作爲參數傳遞。