Упражнение по проверке формы

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

Я вижу три проблемы:

1. Скрипка JS настроена неправильно, что объясняет, что в скрипте (только) функция никогда не выполняется.В панели JS есть меню с «Load Type».По умолчанию выбрано «On Load», но вы должны выбрать «No wrap - bottom of body».Опция по умолчанию оборачивает функцию в другую анонимную функцию, и тогда она больше не видна вашим атрибутам HTML.

2. В вашем коде есть один случай, когда getElementById написано неправильно: этоимеет в конце заглавную букву "D", и это нарушит код.

3. Ваш код ссылается на элемент select с document.getElementById("states");, но этот элемент имеет только name атрибут, а не id.Так что дайте этому select элементу id="states" атрибуты.