javascript как проверить что форма Form заполнена все поля

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

Также скрипт проверяет правильность ввода паролей.

Если в браузере отключен javascript то данные формы уйдут на сервер и их нужно проверять уже php обработчиком. Хотя проверять желательно в любом случае, чтобы выявлять ошибки в различных ситуациях.


В раздел head вставьте стили:

  <style>
    label {
      display: block;
    }

    .error input,
    .error textarea {
      border: 1px solid red;
    }

    .error {
      color: red;
    }
  </style>

В раздел body вставьте код:

<script type="text/javascript">
       
    function showEr(container, errorMessage) {//показываем ошибку
      container.className = 'error';
      var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
    }

    function resetEr(container) {//очищаем ошибку
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }

    function validate(form) {//валидатор полей
       
      var elems = form.elements;
       
      resetEr(elems.from.parentNode);
        resetEr(elems.to.parentNode);
        resetEr(elems.message.parentNode);
      resetEr(elems.password.parentNode);
       
        if (!elems.from.value) {showEr(elems.from.parentNode, ' Укажите от кого');}
      if (!elems.to.value) {showEr(elems.to.parentNode, ' Укажите куда');}

      if (!elems.password.value) {showEr(elems.password.parentNode, ' Укажите пароль');
      } else if (elems.password.value != elems.password2.value) {showEr(elems.password.parentNode, ' Пароли не совпадают');}
     
      if (!elems.message.value) {showEr(elems.message.parentNode, ' Отсутствует текст');}
       
        if (Boolean(elems.from.value) && Boolean(elems.to.value) && Boolean(elems.message.value) &&
            Boolean(elems.password.value) && Boolean(elems.password2.value)) {
                return true; // все поля заполнены, возвращаем ок чтобы отправить форму
        }
       
        return false; // если какое то поле не заполнено форму не отправляем

    }
</script>


  <form action="http://www.ya.ru" method="get">
    <table>
      <tr>
        <td>От кого</td>
        <td>
          <input name="from" type="text">
        </td>
      </tr>
      <tr>
        <td>Ваш пароль</td>
        <td>
          <input name="password" type="password">
        </td>
      </tr>
      <tr>
        <td>Повторите пароль</td>
        <td>
          <input name="password2" type="password">
        </td>
      </tr>
      <tr>
        <td>Куда</td>
        <td>
          <select name="to">
            <option></option>
            <option value="1">Отдел снабжения</option>
            <option value="2">Отдел разработки</option>
            <option value="3">Директору</option>
          </select>
        </td>
      </tr>
    </table>
    Сообщение:
    <label>
      <textarea name="message" style="display:block;width:400px;height:80px"></textarea>
    </label>
    <input type='submit' name='addnewcustomer' id='btn1' value='Add new customer' onclick="return validate(this.form)" >
  </form>

Внимание. Если ваша кнопка выглядит как

<input type="button" onclick="validate(this.form)" value="Проверить">

ТО нужно удалить следующий код:

if (Boolean(elems.from.value) && Boolean(elems.to.value) && Boolean(elems.message.value) &&
            Boolean(elems.password.value) && Boolean(elems.password2.value)) {
                return true; // все поля заполнены, возвращаем ок чтобы отправить форму
        }
       
        return false; // если какое то поле не заполнено форму не отправляем

А вместо этого вставить код который заставляет форму отправить на сервер, т.к. тип button выполнять submit callback после отправки формы не может!

У submit и image_button #executes_submit_callback = TRUE, у button #executes_submit_callback = FALSE.