Проверка группы радиокнопок Javascript

Я хотел бы, чтобы ваша помощь разработала функцию javascript для проверки того, выбрана ли одна из следующих групп радиокнопок (IDType) и какое значение проверено, и просмотрите сообщение об ошибке в разделе (ValidationError) в случае, если радиокнопка не выбрана ??

<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
&nbsp;
</div>
</div>
</td>

Спасибо за вашу помощь.....


javascript validation html radio-button radio-group
person user614040    schedule 12.02.2011    source источник
comment
Что вы пробовали? Что не сработало? Мы не имеем привычки писать ваш код за вас, но будем рады помочь с любыми проблемами.   -  person Oded    schedule 12.02.2011
comment
Оба ваших элемента input[type=radio] имеют одинаковые id. id значения (в отличие от name значений) должны быть уникальными: w3.org/TR/html5/dom.html#concept-id   -  person T.J. Crowder    schedule 12.02.2011
comment
Спасибо за ответ, но я не хочу использовать jQuery и вместо этого использовал простой JavaScript.   -  person user614040    schedule 12.02.2011

Ответы (2)


arrow_upward
8
arrow_downward

Прежде всего, как сказали мои коллеги, у вас не может быть одного и того же идентификатора («IDType») для обоих ваших переключателей.

Вот решение только с javascript, без jquery.

<html>
<head>
<script type="text/javascript">
function Validate() {
    var radios = document.getElementsByName('IDType')

    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
        alert("Selected Value = " + radios[i].value);
        return true; // checked
    }
    };

    // not checked, show error
    document.getElementById('ValidationError').innerHTML = 'Error!!!';
    return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>
person vk_muse    schedule 12.02.2011

arrow_upward
2
arrow_downward 

function validateRadioButtons(){ 
    var radio = $('input:radio[name="IDType"]:checked');
    if(radio.length == 0)//no buttons selected
       {
           $('ValidationError').text("you haven't selected any buttons!");
           return;
       }
    $('ValidationError').text(radio.val()+' is selected');
}

ps: чтобы это сработало, вам следует рассмотреть возможность использования уникальных идентификаторов для элементов dom. у вас не может быть одного и того же идентификатора ("IDType") для обоих ваших переключателей.

person gion_13    schedule 12.02.2011
comment
Спасибо за ответ, но я не хочу использовать jQuery и вместо этого использовал простой JavaScript. - person user614040; 12.02.2011