1

I want to prevent the form ( with id="new_question") from being submitted if an answer (radio button) is not checked from that radio group.

<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>

There are ten radio groups (with the same html above) that require one answer checked.
The form id is "new_question"

So need help making a validation that doesn't allow the form to be submitted unless all the answers are checked.

What I have so far:

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

I do need this for the rest of the 10 radio groups but I think once I know how to do it on one, I can implement the code on all the radio groups.

Rick G
  • 53
  • 1
  • 9
  • possible duplicate of [JavaScript radio button confirmation](http://stackoverflow.com/questions/14957604/javascript-radio-button-confirmation) – BradleyIW May 10 '15 at 11:26
  • why you have radio field name like *name="question[q1correct]"*.... It could be simply **name="question"** and check this variable if selected. – MaNKuR May 10 '15 at 11:28
  • The name used is just rails convention. I could customize the name but just for convenience sake, I let rails do it's own naming. – Rick G May 10 '15 at 11:45

1 Answers1

0

assuming that kind of 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>

you might use following 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/

djaszczurowski
  • 4,385
  • 1
  • 18
  • 28