Показать сообщение отдельно
  #3 (permalink)  
Старый 09.12.2015, 03:03
Новичок на форуме
Отправить личное сообщение для .javaNoob Посмотреть профиль Найти все сообщения от .javaNoob
 
Регистрация: 09.12.2015
Сообщений: 2

Decode,
Спасибо огромное!

Немного изменил скрипт + добавил комментарии, может пригодится кому.

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .error {
      display: none;
    }
  </style>
</head>
<body>
    <div id="input-radio">
      <div class="radio-style">
        <label>
          <input type="radio" name="radio-poll" value="1" class="radio">
          #1
        </label>
      </div>
      <div class="radio-style">
        <label>
          <input type="radio" name="radio-poll" value="2" class="radio">
          #2
        </label>
      </div>
      <div class="radio-style">
        <label>
          <input type="radio" name="radio-poll" value="3" class="radio">
          #3                                     
        </label>
      </div>
    </div>

    <button type="submit" onclick="fnName();">Отправить данные</button>
  
  
  <div class="error">Поля не заполнены!</div>
  
<script>
  function fnName() {
    var radioElems = document.querySelectorAll('.radio'); //Поиск элементов в документе с классом .radio.
    error = document.querySelector('.error'); //Аналогично предыдущему, только ищем один элемент. Т.е. будет работать только для первого элемента в документе.
    submit = false;

      [].forEach.call(radioElems, function(item) {
        item.checked && (submit = true);
      }); // Если я правильно понял, то это простой вариант валидации. (т.е. Поиск среди элементов .radio отмеченного)

        if (!submit) {
        error.style.display = 'block'; //Если пользователь не выбрал ни одного пункта, меняем CSS стиль и собственно показываем сообщение.
        return false;
      } else {
        error.style.display = 'none'; //Этот вариант сработает в случае если пользователь поставил чекбокс и всё верно. Что бы сообщение не висело на странице.
        return false; 
      }
};
</script>
</body>
</html>

Последний раз редактировалось .javaNoob, 09.12.2015 в 06:17.
Ответить с цитированием