使用 Javascript 验证多选单选按钮

Question

如果未从该单选组中选中答案（单选按钮），我想阻止提交表单（id="new_question"）。

<input class="radioclass" id="q1a" value="a" name="question[q1correct]" type="radio">
<input class="radioclass" id="q1b" value="b" name="question[q1correct]" type="radio">
<input class="radioclass" id="q1c" value="c" name="question[q1correct]" type="radio">
<input class="radioclass" id="q1d" value="d" name="question[q1correct]" type="radio">
<input id="publishbtn" class="greenbtn" type="submit" value="PUBLISH" name="commit"></input>

有十个单选组（同上html）需要检查一个答案。
表单 ID 为 "new_question"

因此需要帮助进行验证，除非检查所有答案，否则不允许提交表单。

我目前拥有的：

validateForm = function() {
x = document.forms['new_question']['question[q1correct]'].value;
if (x === null || x === '') {
  alert('Name must be filled out');
return false;
 }
};

其余 10 个无线电组中确实需要这个，但我想一旦我知道如何在一个无线电组上执行此操作，我就可以在所有无线电组上实施代码。

Answer 1

假设那种 html:

<form id="foo">
    <div class='selectGroup'>
        <input class="radioclass" id="q1a" value="a" name="question[q1correct]" type="radio">1</input>
        <input class="radioclass" id="q1b" value="b" name="question[q1correct]" type="radio">2</input>
        <input class="radioclass" id="q1c" value="c" name="question[q1correct]" type="radio">3</input>
        <input class="radioclass" id="q1d" value="d" name="question[q1correct]" type="radio">4</input>

    </div>

    <div class='selectGroup'>
        <input class="radioclass" id="q2a" value="a" name="question[q2correct]" type="radio">1</input>
        <input class="radioclass" id="q2b" value="b" name="question[q2correct]" type="radio">2</input>
        <input class="radioclass" id="q2c" value="c" name="question[q2correct]" type="radio">3</input>
        <input class="radioclass" id="q2d" value="d" name="question[q2correct]" type="radio">4</input>

    </div>

    <input id="publishbtn" class="greenbtn" type="submit" value="PUBLISH" name="commit">

        </input>
</form>

你可能会用到下面的js

$('#foo').submit(function(e) { 
    e.preventDefault();

    var $form = $(e.currentTarget)
    var groupsValidationList = []

    selectGroups = $form.children('.selectGroup')

    selectGroups.each(function(index, group) {
      $group = $(group);

        checks = $group.children('.radioclass').map(function(index, radioItem) { 

            return $(radioItem).is(':checked')
        })
         isValid = ($.inArray(true, checks) != -1);

         groupsValidationList.push(isValid);
    })

    if(groupsValidationList.every(function(validationResult) { return validationResult; }))             {
        alert('ok');
    } else {
         alert('at least one group is not marked');   
    }


})

https://jsfiddle.net/4qwvgqkz/

使用 Javascript 验证多选单选按钮

Validate multiple choice radio buttons with Javascript

javascript

validation

radio-button