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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了尝试通过Javascript验证表单,但代码不起作用相关的知识,希望对你有一定的参考价值。

我有一个简单的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代码。该表单应该将输入字段变为空粉红色并显示错误消息。此外,电话号码输入字段仅应允许数字。如果一切都有效,它应该只提交并加载一个感谢用户的新页面。任何帮助是极大的赞赏!!!!

答案

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

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

以上是关于尝试通过Javascript验证表单,但代码不起作用的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 表单验证器不适用于 html

JQuery 验证问题:我在同一页面上有 2 个表单,每个表单在 2 个不同的选项卡中,但只有一个验证不起作用

JavaScript 在 Safari 中不起作用,但在 Firefox 和 Chrome 中起作用

JQuery 表单验证在开发浏览器上不起作用

表单验证在引导程序中不起作用

如何使用 JavaScript 验证此表单上的邮政编码?