然而

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;行之间，所以您将看到警报，但永远不会到达return语句 - 因此该函数不会返回false并且表单将是提交。

如果您将行更改为：

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

......它应该有用。

然而

您应该将函数分配给<form>的DOM对象的submit事件，而不是使用内联事件处理程序。

如果这样做，您将传递一个事件对象到该函数的第一个参数，您可以使用event.preventDefault()而不是返回false。这样可以避免这个问题（如果在发生错误之前放置了这条线），并且通常是更好的处理方法，因为返回false也会阻止事件的传播，这可能是不可取的 - 实际上这使得在这个具体案例中差别不大，但作为一般规则确实如此。

如果这样做，处理程序将在DOM对象的上下文中执行 - 因此this变量将是对它的引用，您不需要将其作为参数传递。

尽管javascript验证返回false并显示警告消息，但表单仍然提交

1 个答案:

然而