Проблема с подтверждением правильного возраста в html форме - PullRequest
Новая
       21

Проблема с подтверждением правильного возраста в html форме

0 голосов
/ 29 апреля 2020

Я хочу убедиться, что возраст соответствует году рождения, где оба значения представлены в форме html в соответствии с текущим годом. Однако после ввода значения, которое не удовлетворяет моим требованиям, оно не выдает мне предупреждение. 

function formError() {

  if (document.getElementById('name').value == "") {
    alert('Please enter your name.');
    document.getElementById('name').style.borderColor = "red";
    return false;
  }

  if (document.getElementById('yearborn').value == "") {
    alert('Please enter the year you were born.');
    document.getElementById('yearborn').style.borderColor = "red";
    return false;
  }

  if (document.getElementById('age').value == "") {
    alert('Please enter your age.');
    document.getElementById('age').style.borderColor = "red";
    return false;
  }

  var d = new Date();
  var n = d.getFullYear();
  var age = document.getElementById('age').value;
  var yearBorn = getElementById('yearborn').value;

  if (n - age !== yearBorn) {
    alert('Please make sure that your age and year born is correct.');
    return false;
  }

}
<fieldset>
  <form id="frmName" method=post action="#" onsubmit="return formError()">
    <h1>Inf115 compulsory assignment 3</h1>
    <p>
      <b>Name:</b><input type="text" id="name" name="name" maxlength="20" />
    </p>
    <p>
      <b>Year of birth:</b><input type=int id="yearborn" maxlength="4" />
    </p>
    <p>
      <b>Age:</b><input type=int id="age" maxlength="3" />
    </p>
    <p>
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
    </p>
  </form>
</fieldset>

1 Ответ

0 голосов
/ 29 апреля 2020

  1. отсутствует документ в document.getElementById

  2. ошибка в возрасте - возможно, пользователь еще не n - yearBorn

  3. Неверный HTML, набор полей должен быть внутри формы

  4. Я настоятельно рекомендую EventListener и сбросить цвет до ошибки

Если вы не хотите предложений, то 

    const diff = n - yearBorn - age ;
    if (diff !== 0 && diff !== 1) {

достаточно 

window.addEventListener("load", function() {
  document.getElementById("frmName").addEventListener("submit", function(e) {

    const errors = [];
    let obj;

    obj = document.getElementById('name');
    obj.classList.toggle("error", 0)
    if (obj.value == "") {
      errors.push('Please enter your name.');
      obj.classList.toggle("error", 1)
    }

    obj = document.getElementById('yearborn');
    obj.classList.toggle("error", 0)
    if (obj.value == "") {
      errors.push('Please enter the year you were born.');
      obj.classList.toggle("error", 1)
    }

    obj = document.getElementById('age');
    obj.classList.toggle("error", 0)
    if (document.getElementById('age').value == "") {
      errors.push('Please enter your age.');
      obj.classList.toggle("error", 1)
    }

    const n = new Date().getFullYear();
    const age = +document.getElementById('age').value;
    const yearBorn = +document.getElementById('yearborn').value;
    const diff = n - yearBorn - age ;
    if (diff !== 0 && diff !== 1) {
      errors.push('Please make sure that your age and year born is correct.');
      obj.classList.toggle("error", 1)
    }
    if (errors.length > 0) {
      alert(errors.join("\n"));
      e.preventDefault();
    }  

  });
});
.error {
  border-color: red;
}
<form id="frmName" method=post action="#">
  <fieldset>
    <h1>Inf115 compulsory assignment 3</h1>
    <p>
      <b>Name:</b><input type="text" id="name" name="name" maxlength="20" />
    </p>
    <p>
      <b>Year of birth:</b><input type=int id="yearborn" maxlength="4" />
    </p>
    <p>
      <b>Age:</b><input type=int id="age" maxlength="3" />
    </p>
    <p>
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
    </p>
  </fieldset>
</form>
...