Форум

.javaNoob · #1 (**permalink**) 09.12.2015, 01:38

Здравствуйте!
Помогите пожалуйста.

Взял вариант приведённый в этой теме, и после небольшой модификации хотел использовать для проверки заполненности полей формы.

Обычные поля то просто можно пометить так:

Цитата:

required="required"

и всё вроде хорошо.
Но у меня возникла необходимость провернуть, нечто подобное с чекбоксами.

Цитата:

type="radio"

Гугл уже замучал. Испытывал различные варианты.

Собственно вот сам код:

<input type="radio" class="radio111">#1</br>
<input type="radio" class="radio111">#2</br>
<input type="radio" class="radio111">#3</br>
</br>
<button type="button" onclick="checkFieldsInForm()">Отправить данные</button>
<div class="valBut"></br>Поля не заполнены!</div>
<script>
function checkFieldsInForm() {

if ( $('.radio111').val() ) {
$('.valBut').hide();
} else {
$('.valBut').show();
}
}

$('.radio1').change(function() {
checkFieldsInForm();
});

$('.valBut').hide();
</script>

Такой-же вариант с текстовым полем естественно работает!

<input type="text" class="radio222">
</br>
<button type="button" onclick="checkFieldsInForm2()">Отправить данные</button>
<div class="valBut2"></br>Поля не заполнены!</div>
<script>
function checkFieldsInForm2() {

 if ( $('.radio222').val() ) {
$('.valBut2').hide();
} else {
$('.valBut2').show();
}
}

$('.radio1').change(function() {
checkFieldsInForm2();
});

$('.valBut2').hide();
</script>

Я прекрасно понимаю, что проблема здесь:

.val

Но к сожалению решения сам не смог найти

Единственный вариант который начал работать, но не совсем как хотелось бы, это:

.val

Заменить на:

.onchange

Суть неправильной работы этого метода в том, что ему по барабану на содержимое чекбоксов радио.

Ребята подскажите пожалуйста как решить данную проблему, буду весьма благодарен!

Decode · #2 (**permalink**) 09.12.2015, 02:20

.javaNoob, если я правильно понял.

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .error {
      display: none;
    }
  </style>
</head>
<body>
  <form action="">
    <input type="radio" class="radio" />#1<br />
    <input type="radio" class="radio" />#2<br/>
    <input type="radio" class="radio" />#3<br /><br />
    <button type="submit">Отправить данные</button>
  </form>
  
  <div class="error">Поля не заполнены!</div>
  
  <script>
    document.forms[0].onsubmit = function() {
      var radioElems = document.querySelectorAll('.radio'),
          error = document.querySelector('.error');
          submit = false;
      
      [].forEach.call(radioElems, function(item) {
        item.checked && (submit = true);
      });
      
      if (!submit) {
        error.style.display = 'block';
        return false;
      }
    };
  </script>
</body>
</html>

.javaNoob · #3 (**permalink**) 09.12.2015, 03:03

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>

laimas · #4 (**permalink**) 09.12.2015, 16:27

Странно, если у вас ни одна кнопка не выбрана по умолчанию, значит логично что и необязательна. Какие тогда претензии к клиенту?
А если есть по умолчанию, то гарантировано выбрано (кнопки не заполняются, их выбирают). Единственное, это если не выбрано, то подстава, но ее проверяют на сервере.

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

Форум

Справочник

Discord чат

Курсы javascript