Q: Ошибка при чтении формы (Uncaught TypeError: Cannot read property 'elements' of undefined)", Ниже представлен скрипт валидации формы. Ошибка распространённая, но c JS у меня проблемы. Объясните, пожалуйста, популярно.


// массив строк для ошибок
var warningMessagesContent = [
  'Укажите от кого!',
  'Укажите почту!',
  'Почта не совпадает!',
  'Отсутствует текст!'
];

function validate(form) {
  for (var i = 0; i < form.elements.length; i++) {

    // пропускаем поле подтверждения почты
    if (form.elements[i].name == 'email2') continue;

    // удаляем сообщение об ошибке
    removeWarningMessage(form.elements[i]);

    // если нет значения в строке, создаётся сообщение об ошибке
    if (!form.elements[i].value) {
      createWarningMessage(form.elements[i], warningMessagesContent[i]);
      continue;
    };

    // значение в строке есть, если это почта и она не совпадает, создаётся сообщение о соответствующей ошибке
    if (form.elements[i].name == 'email' && form.elements[i].value != form.elements.email2.value) {
      createWarningMessage(form.elements[i], warningMessagesContent[i + 1]);
    };
  };
};

function createWarningMessage(elem, text) {

  var warningMessage = document.createElement('span');
  warningMessage.innerHTML = text;
  warningMessage.className = 'warning-message';
  elem.parentNode.className = 'warning';
  elem.parentNode.appendChild(warningMessage);
};

//удаление предупреждений
var warningMessages = document.body.getElementsByClassName('warning-message');
while (warningMessages.length) {
  warningMessages[warningMessages.length - 1].parentNode.classList = '';
  warningMessages[warningMessages.length - 1].remove();
};
<form>
  <table>
    <tr>
      <td>Имя</td>
      <td><input name="from" type="text"> </td>
    </tr>
    <tr>
      <td>Почта</td>
      <td><input name="email" type="email">
      </td>
    </tr>
    <tr>
      <td>Повторите почту</td>
      <td><input name="email2" type="email">
      </td>
    </tr>
  </table>
  <label>
  <textarea name="message"style="display:block;width:400px;height:100px">
    </textarea>
 </label>
  <input type="button" onclick="validate ()" value="Проверить">
</form>



A: Если совсем брутфорсом, то validate для обработки "формы", нужна эта самая форма, которую Вы ей не передаете. По колхозному,для примера, дадим ей айди, а в функции будем по этому айди брать эту форму. Далее - удаление текста ошибок. removeWarningMessage не задана, поэтому код и дальше не взлетит, в примере поставил заглушку с консолькой.


// массив строк для ошибок
var warningMessagesContent = [
  'Укажите от кого!',
  'Укажите почту!',
  'Почта не совпадает!',
  'Отсутствует текст!'
];

function createWarningMessage(elem, text) {
  var warningMessage = document.createElement('span');
  warningMessage.innerHTML = text;
  warningMessage.className = 'warning-message';
  elem.parentNode.className = 'warning';
  elem.parentNode.appendChild(warningMessage);
};

function removeWarningMessage() {
  console.log('remove!!!');
}

//удаление предупреждений
var warningMessages = document.body.getElementsByClassName('warning-message');
while (warningMessages.length) {
  warningMessages[warningMessages.length - 1].parentNode.classList = '';
  warningMessages[warningMessages.length - 1].remove();
};

function validate() {
  const form = document.getElementById('x')
  for (var i = 0; i < form.elements.length; i++) {

    // пропускаем поле подтверждения почты
    if (form.elements[i].name == 'email2') continue;

    // удаляем сообщение об ошибке
    removeWarningMessage(form.elements[i]);

    // если нет значения в строке, создаётся сообщение об ошибке
    if (!form.elements[i].value) {
      createWarningMessage(form.elements[i], warningMessagesContent[i]);
      continue;
    };

    // значение в строке есть, если это почта и она не совпадает, создаётся сообщение о соответствующей ошибке
    if (form.elements[i].name == 'email' && form.elements[i].value != form.elements.email2.value) {
      createWarningMessage(form.elements[i], warningMessagesContent[i + 1]);
    };
  };
};
<form id='x'>
  <table>
    <tr>
      <td>Имя</td>
      <td><input name="from" type="text"> </td>
    </tr>
    <tr>
      <td>Почта</td>
      <td><input name="email" type="email">
      </td>
    </tr>
    <tr>
      <td>Повторите почту</td>
      <td><input name="email2" type="email">
      </td>
    </tr>
  </table>
  <label>
  <textarea name="message"style="display:block;width:400px;height:100px">
    </textarea>
 </label>
  <input type="button" onclick="validate ()" value="Проверить">
</form>


