Javascript.RU

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

Проверка полей <input type="radio"
Здравствуйте!
Помогите пожалуйста.

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

Обычные поля то просто можно пометить так:
Цитата:
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


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

Ребята подскажите пожалуйста как решить данную проблему, буду весьма благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2015, 02:20
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

.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>

Последний раз редактировалось Decode, 09.12.2015 в 02:23.
Ответить с цитированием
  #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.
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2015, 16:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка полей при отправке all4me1982 Общие вопросы Javascript 6 17.03.2015 14:02
Проверка полей serrrgggeee Javascript под браузер 0 08.10.2014 15:16
Проверка полей при потере фокуса Paltusssss Общие вопросы Javascript 2 13.08.2013 19:32
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14