Question

我已经在这个项目上工作了一个多星期，无法弄清楚为什么我的表单跳过了验证过程。如果一切都正确无误，则应该通过电子邮件发送表格。当我单击“提交”按钮时，它将通过电子邮件发送我在字段中输入的所有内容，而不会验证信息。

我所有的代码都发布在JSFiddle

    function formValidation() {

  //array to collect error messages
  var error = [];

  //regEx variables
  var letters = /^[A-Za-z]+$/;
  var letnum = /^[A-Za-z0-9]+$/;
  var numbers = /^[0-9]+$/;

  //validate First Name field
  var fn = document.getElementById("fName");
  if (fn.value == "" || fn.value === "Your First Name") {
    error.push("First name is required.");
  } else if (!fn.value.match(letters)) {
    error.push("First name can only include letters of the alphabet.");
  }

  //validate Last Name field
  var ln = document.getElementByID("lName");
  if (ln.value == "" || ln.value === "Your Last Name") {
    error.push("Last name is required.");
  } else if (!fn.value.match(letters)) {
    error.push("Last name can only include letters of the alphabet.");
  }

  //validate Address field
  var st = document.getElementById("street");
  if (st.value == "") {
    error.push("Address is required.");
  } else if (st.value.match(letnum)) {
    error.push("Address can only use letters of the alphabet and numbers.");
  }

  //validate City field
  var c = document.getElementById("city");
  if (c.value == "") {
    error.push("City is required.");
  } else if (c.value.match(letters)) {
    error.push("City can only use letters of the alphabet.");
  }

  //validate State is selected
  var s = document.getElementById("states");
  var stateChoice = s.options[s.selectedIndex].value;
  if (stateChoice == "default") {
    error.push("Please select a State.");
  }

  //validate Zip Code field
  var zc = document.getElementById("zip");
  if (zc.value == "") {
    error.push("Zip Code is required.");
  } else if (!zc.value.match(numbers)) {
    error.push("Zip Code can only use numbers.");
  } else if (zc.value.length < 5 || zc.value.length > 5) {
    error.push("Please enter a valid US Zip Code.");
  }

  //validate Phone field
  var a = document.getElementById("area");
  var ph = document.getElementById("phone");
  if (a.value == "" || ph.value == "") {
    error.push("Phone Number is required.");
  } else if (a.value.length < 3 || a.value.length > 3 ||
    ph.value.length < 7 || ph.value.length > 7) {
    error.push("Please enter a valid phone number.");
  }

  //validate Email field
  var e = document.getElementById("email");
  if (e.value == "") {
    error.push("Email address is required.");
  } else if (e.value.indexOf("@", 0) == -1 || e.value.indexOf("@", 0) == 64 ||
    e.value.indexOf(".", 0) == = 1 || e.value.indexOf(".", 0) == e.value.indexOf("@", 0) + 252) {
    error.push("Please enter a valid email address.");
  }

  //validate Email Confirmation field
  if (ec.value == "") {
    error.push("Please confirm your email address.");
  } else if (ec.value !== e.value) {
    error.push("Your email addresses do not match.");
  }

  //validate Meal Preference is selected
  var m = document.getElementsByName("meal");
  var formValid = false;
  var i = 0;
  while (!formValid && i < m.length) {
    if (m[i].checked) {
      formValid = true;
    }
    i++;
  }

  if (!formValid) {
    error.push("Must choose a meal preference.");
  }

  //validate at lease 2 Contact Methods are selected
  var cm = document.getElementsByName("contact");
  var count = 0;
  for (var j = 0; j < cm.length; i++) {
    if (cm[i].checked) {
      count++;
    }
  }

  if (count < 2) {
    error.push("You must choose at least two contact methods.");
  }

  //validate Comments field
  var comm = document.getElementByID("comm");
  if (comm.length > 250) {
    error.push("Please limit your comments to 250 characters.");
  }

  //return false if errors occurred or true if no errors occurred
  if (error.length > 0) {
    alert("Errors occurred\n\n" + error.join("\n"));
    return false;
  } else {
    return true;
  }

}

Answer 1

我看到三个问题：

JS fiddle的配置不正确，这说明在小提琴中（仅）该函数从未执行。在JS面板中，有一个带有“加载类型”的菜单。默认情况下，“加载时”处于选中状态，但您应选择“不包裹-底部”。默认选项将函数包装在另一个匿名函数中，然后您的HTML属性不再可见。
您的代码中有一种情况，其中getElementById的拼写错误：它的末尾有一个大写的“ D”，这将破坏代码。
您的代码使用select引用了document.getElementById("states");元素，但是该元素仅具有name属性，而没有id。因此，给该select元素一个id="states"属性。

表格验证练习

1 个答案: