Есть ли в любом случае заполнять ошибки во всех формах ввода сразу. Эта форма не использует API проверки ограничений

Question

эта форма не использует API проверки ограничений !!

Обратился к разработчику mozilla и прочитал об использовании проверки данных формы для настройки ошибок. https://codepen.io/anon/pen/KYwOyd?&editable=true#anon-login<----I использовал этот ссылочный код для моей формы, которая имеет имя, адрес электронной почты, тему, которая связана с php-почтой. </p>

Проблема в том, что ссылка работает только для одной функции - addEvent для почты, но я использовал тот же addEvent, но по-другому используя 2 функции addEvent и addEvent2, надеясь, что функции будут разделяться с каждым входом, поэтому ошибки будут появляться одновременно.

Но когда я намеренно ввел неправильные атрибуты во всю форму, чтобы всплыли ошибки, они выскакивают только в одной области, скажем, по электронной почте, но вся форма просто читается, но не показывает всплывающее окно для каждого ввода ,

Я пытался создавать одни и те же функции под разными именами, настраивать их в массивах, но не хотел, потому что каждая ошибка будет выполняться по-разному, например, введите адрес электронной почты, введите правильное имя и т. Д. *

````//choosing vars geElementById to get html5 id //`````

var form  = document.getElementsByTagName('form')[0];
var mail = document.getElementById('mail');
var name = document.getElementById('name');

`````````````````````````````

```//error vars in arrays//``` 
   var errorEmail = mail;
   while ((errorEmail = errorEmail.nextSibling).nodeType != 1);

   var errorName = name;
   while ((errorName = errorName.nextSibling).nodeType != 1);


``````````````````````
```//regExp codes//```
 var mailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a- 
 zA-Z0-9-]+)*$/;
 var nameRegExp =/^[a-zA-Z\s]+$/;

``````````````````

````````example of the mozilla code`````

  function addEvent(element, event, callback) {
  var previousEventCallBack = element["on"+event];
   element["on"+event] = function (e) {
  var output = callback(e);

     if (output === false) return false;

  if (typeof previousEventCallBack === 'function') {
  output = previousEventCallBack(e);
  if(output === false) return false;
  }}}

   addEvent(window, "load", function () {
   var test = mail.value.length === 0 || mailRegExp.test(mail.value);
   mail.className = test ? "valid" : "invalid";
    });

  addEvent(mail, "input", function () {
  var test = mail.value.length === 0 || mailRegExp.test(mail.value);

 if (test) {
 mail.className = "valid";
 errorEmail.innerHTML = "";
 errorEmail.className = "errorEmail";
 } else {
  mail.className = "invalid";
 }
 });


  addEvent(form, "submit", function () {
  var test = mail.value.length === 0 || mailRegExp.test(mail.value);

   if (!test) {
   mail.className = "invalid";
   errorEmail.innerHTML = "Enter Valid Email Please!";
   errorEmail.className = "errorEmail active";


   return false;
   } else {
   mail.className = "valid";
   errorEmail.innerHTML = "";
   errorEmail.className = "errorEmail";
   } });


``` then my addition to code for name error````

    function addEvent2(element, event, callback) {
    var previousEventCallBack = element["on"+event];
    element["on"+event] = function (e) {
    var output = callback(e);
    if (output === false) return false;

   if (typeof previousEventCallBack === 'function') {
   output = previousEventCallBack(e);
   if(output === false) return false;
   }
   }
   }

 addEvent2(window, "load", function () {
 var test2 = name.value.length === 0 || nameRegExp.test(name.value);
 name.className = test2 ? "valid" : "invalid";
 });


 addEvent2(name, "input", function () {
 var test2 = name.value.length === 0 || nameRegExp.test(name.value);
 if (test2) {
 name.className = "valid";
 errorName.innerHTML = "";
 errorName.className = "errorName";
}  else {
name.className = "invalid";
}
 });

 addEvent2(form, "submit", function () {
 var test2 = name.value.length === 0 || nameRegExp.test(name.value);
 if (!test2) {

name.className = "invalid";
errorName.innerHTML = "Enter Your Full Name Please!";
errorName.className = "errorName active";

return false;
} else {


name.className = "valid";
errorName.innerHTML = "";
errorName.className = "errorName";

}

});

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

Я ожидаю, что почта будет недействительной и назовите его также пустым