Проверка формы JavaScript - Дата

Question

Моя школа дала мне неделю на изучение JavaScript. Мы начали с проверки формы.

Мне удалось успешно определить имя и адрес электронной почты, но я не могу добавить требуемую проверку даты.

Пока мой код:

function formValidator() {
  // Make quick references to our fields
  var name = document.getElementById('name');
  var email = document.getElementById('email');

  // Check each input in the order that it appears in the form!
  if (isAlphabet(name, "Please enter only letters for your name")) {
    if (emailValidator(email, "Please enter a valid email address")) {
      return true;
    }
  }
  return false;
}

function notEmpty(elem, helperMsg) {
  if (elem.value.length == 0) {
    alert(helperMsg);
    elem.focus(); // set the focus to this input
    return false;
  }
  return true;
}

function isNumeric(elem, helperMsg) {
  var numericExpression = /^[0-9]+$/;
  if (elem.value.match(numericExpression)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphabet(elem, helperMsg) {
  var alphaExp = /^[a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphanumeric(elem, helperMsg) {
  var alphaExp = /^[0-9a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function lengthRestriction(elem, min, max) {
  var uInput = elem.value;
  if (uInput.length >= min && uInput.length <= max) {
    return true;
  } else {
    alert("Please enter between " + min + " and " + max + " characters");
    elem.focus();
    return false;
  }
}

function madeSelection(elem, helperMsg) {
  if (elem.value == "Please Choose") {
    alert(helperMsg);
    elem.focus();
    return false;
  } else {
    return true;
  }
}

function emailValidator(elem, helperMsg) {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  if (elem.value.match(emailExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

//javascriptkit.com/script/script2/validatedate.shtml


function checkdate(input) {
  var validformat = /^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
  var returnval = false
  if (!validformat.test(input.value))
    alert("Invalid Date Format. Please correct and submit again.")
  else { //Detailed check for valid date ranges
    var monthfield = input.value.split("/")[0]
    var dayfield = input.value.split("/")[1]
    var yearfield = input.value.split("/")[2]
    var dayobj = new Date(yearfield, monthfield - 1, dayfield)
    if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))
      alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
    else
      returnval = true
  }
  if (returnval == false) input.select()
  return returnval
}

<div id="form">
  <h1>Questions? Contact Us!</h1>
  <form onsubmit='return formValidator()'>
    <label for="name">Name:</label>
    <input type='text' id='name' /><br />
    <label for="email">Email:</label>
    <input type='text' id='email' /><br />
    <label for="date">Date: </label>
    <input type="text" id="date" required /> <br>
    <label for="message">Question:</label>
    <textarea name="message" rows="8" cols="20" required>Please make sure your question is at least five words.</textarea> <br>
    <input type='submit' value='Check Form' />
  </form>
</div>

Я думаю, что мне следует изменить дату проверки функции, но я не уверен, что делать.

Спасибо.

Answer 1

Подключите проверку даты в вашей функции. formValidator - Я изменил эту функцию, чтобы использовать isValid, чтобы избежать большого количества вложенных проверок. Если вы хотите работать ТОЛЬКО с одним за раз, начиная с name, вы можете использовать это и в следующем, добавив его в начало каждого, оно пропускается, если оно ложно:

if (isValid && !emailValidator(email, "Please enter a valid email address"))

Обратите внимание, что добавленное ! в !emailValidator говорит о том, что isValid ложно в случае сбоя.

function formValidator() {
  // Make quick references to our fields
  var name = document.getElementById('name');
  var email = document.getElementById('email');
  var mydate = document.getElementById('date'); // add this one
  var isValid = true; //added this (form level valid true/false)

  // Check each input in the order that it appears in the form!
  if (!isAlphabet(name, "Please enter only letters for your name")) {
    isValid = false;
  }

  if (!emailValidator(email, "Please enter a valid email address")) {
    isValid = false;
  }
  // check the date
  if (!checkdate(mydate)) {
    isValid = false;
    alert("bad date " + mydate.value);
  }
  return isValid;
}

function notEmpty(elem, helperMsg) {
  if (elem.value.length == 0) {
    alert(helperMsg);
    elem.focus(); // set the focus to this input
    return false;
  }
  return true;
}

function isNumeric(elem, helperMsg) {
  var numericExpression = /^[0-9]+$/;
  if (elem.value.match(numericExpression)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphabet(elem, helperMsg) {
  var alphaExp = /^[a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphanumeric(elem, helperMsg) {
  var alphaExp = /^[0-9a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function lengthRestriction(elem, min, max) {
  var uInput = elem.value;
  if (uInput.length >= min && uInput.length <= max) {
    return true;
  } else {
    alert("Please enter between " + min + " and " + max + " characters");
    elem.focus();
    return false;
  }
}

function madeSelection(elem, helperMsg) {
  if (elem.value == "Please Choose") {
    alert(helperMsg);
    elem.focus();
    return false;
  } else {
    return true;
  }
}

function emailValidator(elem, helperMsg) {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  if (elem.value.match(emailExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

//javascriptkit.com/script/script2/validatedate.shtml


function checkdate(input) {
  var validformat = /^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
  var returnval = false;
  if (!validformat.test(input.value)) {
    alert("Invalid Date Format. Please correct and submit again.");
  } else { //Detailed check for valid date ranges
    var monthfield = input.value.split("/")[0];
    var dayfield = input.value.split("/")[1];
    var yearfield = input.value.split("/")[2];
    var dayobj = new Date(yearfield, monthfield - 1, dayfield);
    if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield)) {
      alert("Invalid Day, Month, or Year range detected. Please correct and submit again.");
    } else {
      returnval = true;
    }
  }
  if (returnval == false) {
    input.select();
  }
  return returnval;
}

<div id="form">
  <h1>Questions? Contact Us!</h1>
  <form onsubmit='return formValidator()'>
    <label for="name">Name:</label>
    <input type='text' id='name' /><br />
    <label for="email">Email:</label>
    <input type='text' id='email' /><br />
    <label for="date">Date: </label>
    <input type="text" id="date" required /> <br>
    <label for="message">Question:</label>
    <textarea name="message" rows="8" cols="20" required>Please make sure your question is at least five words.</textarea> <br>
    <input type='submit' value='Check Form' />
  </form>
</div>