Проверка с возвратом input[type="radio"] всегда ложна
У меня есть input[type = "radio"] без отмеченной опции по умолчанию, и мне нужно вернуть false, если ни одна из этих опций не отмечена.
Я изучаю только javascript, поэтому jquery, angular или любой другой будет полезен (на данный момент).
Я могу перебрать radioObj и выбрать его значение, но я не могу вернуть false, если ни одна из опций не отмечена (на самом деле, я не могу вернуть true)
не совсем то, что у меня, но...
<input type = "radio" id = "rd1" name = "radioGrp">opt1
<br>
<input type = "radio" id = "rd2" name = "radioGrp">opt2
а в JS у меня...
var rdObj = document.getElementByName("radioGrp");
var selectedValue;
for (var i = 0, length = rdObj.length; i < length; i++){
if (!rdObj[i].checked){
alert("Select one option");
return false;
}else{
//do something with value of radio checked value
}
}
Этот код всегда дает мне alert("Select one option"), независимо от того, выбираю ли я один вариант или нет.
Необходимость валидации.
Любой хел будет очень признателен
сейчас тестирую...
Обратите внимание, что ваше оповещение сработает дважды, если оба элемента не отмечены флажками. Вместо этого установите флаг вне цикла for и обновите его внутри.
Возможный дубликат проверка, выбран ли хотя бы один переключатель - JavaScript
@HereticMonke, я пробовал решение там, но у меня та же проблема, всегда возвращает false
@HereticMonkey нужен был флаг снаружи. Спасибо за совет
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы, вероятно, захотите дождаться события, прежде чем выполнять какую-либо проверку значений, иначе ваш сценарий будет запущен только один раз, и в этот момент времени ничего не было бы проверено.
Вы можете прикрепить изменить прослушиватель событий к каждой из ваших радиостанций...
var myRadios = document.querySelectorAll('[name=radioGrp]');
var selectedValue;
myRadios.forEach(radio => {
radio.addEventListener('change', changeHandler);
})
function changeHandler(evt) {
// do some check in here
console.info(evt.target.value)
}<input type = "radio" id = "rd1" name = "radioGrp" value='opt1'>opt1
<br>
<input type = "radio" id = "rd2" name = "radioGrp" value='opt2'>opt2... или вы можете прикрепить отправить обработчик события к своей форме и затем проверить свои данные.
const myForm = document.querySelector('form');
myForm.addEventListener('submit', submitHandler);
function submitHandler(evt) {
evt.preventDefault();
const data = new FormData(evt.target);
const optionVal = data.get('radioGrp');
// do some check in here
if (!optionVal) {
console.info(`Please select a value`)
} else {
console.info(`Thanks for selecting ${optionVal}`)
}
}<form>
<input type = "radio" id = "rd1" name = "radioGrp" value='opt1'>opt1
<br>
<input type = "radio" id = "rd2" name = "radioGrp" value='opt2'>opt2
<input type = "submit">
</form>Не знаю, есть ли у моей формы проблемы, но это не работает. я влезу в события, не очень в курсе. Спасибо :)
Какая часть не работает? Вы получаете какие-либо ошибки в консоли?
Сейчас это работает очень хорошо, но у меня нет большого опыта работы с событиями, но это, несомненно, поможет мне попасть в них. Я буду много думать об этом на этой неделе. Спасибо
Вы можете попробовать это:
function validateForm() {
var radios = document.getElementsByName("radioGrp");
var formValid = false;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
formValid = true;
break;
}
}
if (!formValid) {
alert("Select one option");
}
return formValid;
}<form name = "form1" action = "#" onsubmit = "return validateForm();" method = "post">
<input type = "radio" id = "rd1" name = "radioGrp">opt1
<br>
<input type = "radio" id = "rd2" name = "radioGrp">opt2
<br>
<input type = "submit" value = "Submit">
</form>Это именно то, что мне нужно. Большое спасибо!! :D
Пожалуйста :)
Этот код будет запускаться только один раз при загрузке страницы, вы также должны выполнить его при изменении ввода. Также
getElementByNameдолжно бытьgetElementsByName, и удалитеreturnвнутри цикла.