尝试通过Javascript验证表单，但代码不起作用

Question

我有一个简单的HTML表单，我需要在提交之前通过Javascript自定义验证。但是，尽管遵循了我的教科书中的代码，我的表单仍未提交验证。

我是高级Web标记类的平面设计专业学生（不要被名称所迷惑，它本质上是Javascript 101）。这是我第一次使用Javascript，我们正在使用Javascript：Web Warrior第6版作为我们的教科书。如果有一个简单的解决方案，我提前道歉，但就像我说的，我是Javascript的新手。

我们的任务是为我们的网站创建一个表单，然后使用Javascript来阻止表单提交和验证所有输入。如果输入有效，则表单按原样提交。如果不是，那么它假设通过突出显示正确的字段和错误消息来指示哪些字段无效。

我使用教科书章节的工作文件作为我的代码的基础。但是，它不起作用。我不确定它是不是加载Javascript或什么。我已经验证了我的所有代码（显然一切都很好）并联系了我的教授寻求帮助，但我没有收到回复（作业于4月26日到期，我已经提交了，但我想知道发生了什么错误）。

我很幸运获得了使用try / catch / finally语句进行验证的表单，但根据课程，这不是我应该在这里做的。我已经尝试插入其他东西并尝试各种修复，这对我来说有点意义（有些没有）。

"use strict"; // interpret document contents in JavaScript strict mode

/* global variable */
var formValidity = true;

/* validate required fields */
function validateRequired() {
 var inputElements = document.querySelectorAll("input[required]"); // 
 selects everything with input and required
 var errorDiv = document.getElementById("errorMessage");
 var contactBoxes = document.getElementsByName("contact");
 var fieldsetValidity = true;
 var elementCount = inputElements.length;
 var currentElement;
 try {
  for (var i = 0; i < elementCount; i++) { // loop statement to check 
 each field
     // this validates all required input elements in fieldset
     currentElement = inputElements[i];
     if (currentElement.value === "") {
        currentElement.style.background = "rgb(255,233,233)"; // changes 
input to pink if error
        fieldsetValidity = false;
     } else {
        currentElement.style.background = "white";
     }
  }

  if (!contactBoxes[0].checked && !contactBoxes[1].checked) {
     // verify that a crust is selected
     contactBoxes[0].style.outline = "1px solid red";
     contactBoxes[1].style.outline = "1px solid red";
     fieldsetValidity = false;
  } else {
     contactBoxes[0].style.outline = "";
     contactBoxes[1].style.outline = "";
  }

      if (fieldsetValidity === false) { // this is the error shown in the 
 div
           throw "Please complete the indicated field(s) so we may 
provide better service.";
      } else {
         errorDiv.style.display = "none";
         errorDiv.innerHTML = "";
      }
   }
   catch(msg) { // this throws the error if there are any
      errorDiv.style.display = "block";
      errorDiv.innerHTML = msg;
      formValidity = false;
   }
}

function validateNumbers() { // this makes sure the phone number field 
allows 
only numbers
  var pNumNot;
  var pNum = document.getElementById("phoneinput");
  var numErrMsg = document.getElementById("errorNumber");

   try {
      if (isNaN(pNum.value) || pNum.value === "") {
         pNumNot = true;
      } else { // phone input value is a number
         pNum.style.background = "";
         numErrMsg.style.display = "none";
      }
      if (pNumNot) {
          throw "Please use numbers only.";
      }
   }
   catch(msg) {
      if (pNumNot) { // phone input is not a number
         pNum.style.background = "rgb(255,233,233)";
         numErrMsg.style.display = "block";
         numErrMsg.innerHTML = msg; // then this message will display
      }
      formValidity = false;
   }
}

/* validate form */
function validateForm(evt) {
   if (evt.preventDefault) {
      evt.preventDefault(); // prevent form from submitting
   } else {
      evt.returnValue = false; // prevent form from submitting in IE8
   }
   formValidity = true; // reset value for revalidation
   validateRequired();
   validateNumbers();
   if (formValidity === true) {
      document.getElementById("errorMessage").innerHTML = "";
      document.getElementById("errorMessage").style.display = "none";
      document.getElementsByTagName("form")[0].submit();
   } else {
      document.getElementById("errorMessage").innerHTML = "Please 
complete 
the indicated field(s) so we may provide better service.";
      document.getElementById("errorMessage").style.display = "block";
   }
}

/* create event listeners  */
function createEventListeners() {
   var orderForm = document.getElementsByTagName("form")[0];
   if (orderForm.addEventListener) {
      orderForm.addEventListener("submit", validateForm, false);
   } else if (orderForm.attachEvent) {
    orderForm.attachEvent("onsubmit", validateForm);
 }
}

/* run initial form configuration functions */
function setUpPage() {
   createEventListeners();
}

/* run setup functions when page finishes loading */
if (window.addEventListener) {
     window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", setUpPage);
}

如果需要，我可以发布我的HTML代码。该表单应该将输入字段变为空粉红色并显示错误消息。此外，电话号码输入字段仅应允许数字。如果一切都有效，它应该只提交并加载一个感谢用户的新页面。任何帮助是极大的赞赏！！！！

Answer 1

您的表单在没有验证的情况下继续提交的原因是因为您没有在处理提交事件的侦听器中调用event.preventDefault()。此外，由于设置了必需属性，因此您无需检查空字符串的输入值。

我建议你阅读雄辩的JavaScript，以便很好地处理事件监听器。您可以在Mozilla开发人员网络（MDN）上阅读表单验证。