Проверка формы JavaScript по одному полю за раз

Question

Мне нужно написать скрипт, который выполняет валидацию JavaScript, но мне нужно заполнить по одному полю за раз.Например:

У меня есть четыре поля;Имя, Фамилия, Электронная почта, Возраст

Если пользователь щелкает поле отправки и все пусто, ему следует сосредоточиться только на первом поле в форме (Имя), после чего выдается сообщение об ошибке, фокусэто поле, и поверните поле красного цвета с красной рамкой.

Если они заполнят первое поле, оно будет следовать указаниям для второго (фамилия).

Единственный другой изогнутый шар состоит в том, что поле возраста должно содержать только цифры, и они должны быть в диапазоне от 0 до 80.

Текущий скрипт, который у меня есть, правильно выделяет формы, но выделяет все поля и фокусирует последнее.Возраст также является единственным полем, выдающим ошибку.Вот мой сценарий:

"use strict";

var deptList = ["SDEV","DBMS","INFM","CSCI","SVAD","NETI","ITSP","CSIA"];
var list = document.getElementById("progList");
var formValidity = true;
var errMsgDiv = document.getElementById("errorMsg");
function createCheck() {
    deptList.sort();
    for (var i = 0; i <= 7; i++) {
        (function(i) {
        var boxText = deptList[i];
        var deptEntry = document.createElement ("label");
        deptEntry.innerHTML = "<input type=checkbox name=programs[] value=" + i + " />" + boxText;
        list.appendChild (deptEntry);
        console.log("deptEntry");
  })(i);
 }
}
function validateInput(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
  checkBlank();
  validateNumbers(); // additional
  if (formValidity === true) {
    document.getElementsByTagName("form")[0].submit();
  }
}
function createEventListeners() {
  var form = document.getElementsByTagName("form")[0];
   if (form.addEventListener) {
    form.addEventListener("submit", validateInput, false);
  } else if (form.attachEvent) {
    form.attachEvent("onsubmit", validateInput);
}
}
function checkBlank() {
  var chkBlnkVal = true;
  var fName = document.forms[0].fname;
  var lName = document.forms[0].lname;
  var email = document.forms[0].email;
  console.log("Entering checkBlank " + "form validity: " + formValidity +" check blank validity: " + chkBlnkVal);
 try { 
  if (fName.value === ''){
    fName.style.background = "rgb(255,233,233)";
    fName.style.borderColor = "red";
    chkBlnkVal = false;
    fName.focus();
  } else {
    fName.style.background = "white";
    fName.style.borderColor = "white";
  }
 if (chkBlnkVal === false) {
    throw "Please complete all fields.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
  try { 
  if (lName.value === ''){
    lName.style.background = "rgb(255,233,233)";
    lName.style.borderColor = "red";
    chkBlnkVal = false;
    lName.focus();
  } else {
    lName.style.background = "white";
    lName.style.borderColor = "white";
  }
 if (chkBlnkVal === false) {
    throw "Please complete all fields.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
 try { 
  if (email.value === ''){
    email.style.background = "rgb(255,233,233)";
    email.style.borderColor = "red";
    chkBlnkVal = false;
    email.focus();
  } else {
    email.style.background = "white";
    email.style.borderColor = "white";
  }
 if (chkBlnkVal === false) {
    throw "Please complete all fields.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
 console.log("Leaving checkBlank " + "form validity: " + formValidity +" check blank validity: " + chkBlnkVal +" First Name: " + fName.value);
}

function validateNumbers() {
  var numbersValidity = true;
  var age = document.forms[0].age;
  try {
  if (isNaN(age.value) || (age.value
      === "") || (age.value <= -1) || (age.value >= 81)) {
    age.style.background = "rgb(255,233,233)";
    age.style.borderColor = "red";
    numbersValidity = false;
    age.focus();
  } else {
    age.style.background = "white";
    age.style.borderColor = "white";
  }
  if (numbersValidity === false) {
    throw "Please enter valid number for age.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
 console.log("Leaving validateNumbers " + "form validity: " + formValidity +" numbers validity: " + numbersValidity +" age: " + age.value);
}
function init(){
    createEventListeners();
    createCheck();
}

if (window.addEventListener) {
   console.log("> Adding TC39 Event Listener...");
   window.addEventListener ("load", init, false);
}
else if (window.attachEvent) {
   console.log("> Adding MS Event Listener...");
   window.attachEvent ("onload", init);
}

Это HTML, который включает в себя форму:

<form action="exam01.php" method="post" novalidate=novalidate>
<h2>School of Information Technology Membership Form</h2>
<p id="errorMsg"></p>
<fieldset id="left">
 <legend>Contact Info</legend>
 <p><span class="grid3">Name</span>
    <span class="grid1"><input type="text" name="fname" placeholder="First Name" size="15" maxlength="25" autofocus /></span>
    <span class="grid1"><input type="text" name="lname" placeholder="Last Name" size="15" maxlength="25" /></span>
 </p>
 <p><span class="grid3">eMail</span>
    <span class="grid2"><input type="email" name="email" placeholder="user@domain.com" size="35" /></span>
 </p>
 <p><span class="grid3">Age</span>
    <span class="grid2"><input type="number" name="age"  /></span>
 </p> 
</fieldset>
<fieldset id="right">
 <legend>Programs</legend>
 <p class="twoColumn" id="progList"></p>
</fieldset>
<p id="submit"><input type="submit" name="btnSubmit" value="Submit" /></p>
</form>

Answer 1

Итак, проблема в том, что вы проверяете каждое значение, но никогда не получаете значения.Самый простой способ - через возвращение в конце каждого из ваших блоков catch - таким образом, если возникает ошибка, функция прекращает выполнение вместо того, чтобы двигаться дальше и выполнять следующую проверку.

catch(msg) {
  errMsgDiv.style.display = "block";
  errMsgDiv.innerHTML = msg;
  formValidity = false;
  return;
}