使用Java驗證單選按鈕

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/