javascript - 尝试通过 Javascript 验证表单，但代码无法正常工作

问题描述

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

我是高级 Web 标记课程的平面设计学生（不要被名称所迷惑，它本质上是 Javascript 101）。这是我第一次使用 Javascript，我们使用 Javascript: The Web Warrior 6th Edition 作为我们的教科书。如果有一个简单的解决方案，我提前道歉，但就像我说的，我对 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 代码。该表单应该将空白的输入字段变为粉红色并显示错误消息。此外，电话号码输入字段应该只允许数字。如果一切都有效，它应该只提交并加载一个感谢用户的新页面。任何帮助是极大的赞赏！！！！

标签： javascript

javascript - 尝试通过 Javascript 验证表单，但代码无法正常工作

问题描述

解决方案

推荐阅读