Проверка полей <input type="radio"
Здравствуйте!
Помогите пожалуйста.:help: Взял вариант приведённый в этой теме, и после небольшой модификации хотел использовать для проверки заполненности полей формы. Обычные поля то просто можно пометить так: Цитата:
Но у меня возникла необходимость провернуть, нечто подобное с чекбоксами. Цитата:
Собственно вот сам код: <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 Суть неправильной работы этого метода в том, что ему по барабану на содержимое чекбоксов радио. Ребята подскажите пожалуйста как решить данную проблему, буду весьма благодарен!:thanks: |
.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,
Спасибо огромное!:dance: Немного изменил скрипт + добавил комментарии, может пригодится кому.:write: <!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>
|
Странно, если у вас ни одна кнопка не выбрана по умолчанию, значит логично что и необязательна. Какие тогда претензии к клиенту?
А если есть по умолчанию, то гарантировано выбрано (кнопки не заполняются, их выбирают). Единственное, это если не выбрано, то подстава, но ее проверяют на сервере. Но а вообще-то проверить можно было бы просто - выбрать выбранную кнопку в группе, что позволяет сделать селектор, если не вернула результат, значит и не выбрано. |
| Часовой пояс GMT +3, время: 04:26. |