• Registered: 2011-02-25
  • Posts: 56

Topic: Radio button validation

I have a page with 'n' sets of radio buttons that I would like to validate, ie I want to ensure that at lease on radio button has been selected before the user can submit the page. The page source looks like this:

 <tr>
    <td>Choosed the correct software
    (Present info professionally)</td>
    <input id="results_0_question_id" name="results[0][question_id]" type="hidden" value="3" />
    <input id="results_0_student_id" name="results[0][student_id]" type="hidden" value="84" />
    <td><input id="results_0_score_0" name="results[0][score]" type="radio" value="0" /></td>
    <td><input id="results_0_score_1" name="results[0][score]" type="radio" value="1" /></td>

    <td><input id="results_0_score_2" name="results[0][score]" type="radio" value="2" /></td>
    <td><input id="results_0_score_3" name="results[0][score]" type="radio" value="3" /></td>
    <td><input id="results_0_score_4" name="results[0][score]" type="radio" value="4" /></td>
    <td><input id="results_0_score_99" name="results[0][score]" type="radio" value="99" /></td>
  <tr/>
  
  <tr>
    <td>q2
    (Present info professionally)</td>
    <input id="results_1_question_id" name="results[1][question_id]" type="hidden" value="4" />

    <input id="results_1_student_id" name="results[1][student_id]" type="hidden" value="84" />
    <td><input id="results_1_score_0" name="results[1][score]" type="radio" value="0" /></td>
    <td><input id="results_1_score_1" name="results[1][score]" type="radio" value="1" /></td>
    <td><input id="results_1_score_2" name="results[1][score]" type="radio" value="2" /></td>
    <td><input id="results_1_score_3" name="results[1][score]" type="radio" value="3" /></td>
    <td><input id="results_1_score_4" name="results[1][score]" type="radio" value="4" /></td>
    <td><input id="results_1_score_99" name="results[1][score]" type="radio" value="99" /></td>
  <tr/>

So far I have gotten this to work:

<script type="text/javascript" charset="utf-8">
  function validate(){
    test = document.getElementById("results_0_score_0")
    if(test.checked == false){
      alert("Please answer all questions.")
      return false;
    }
  }
</script>

Of course thats just for the first set of radio buttons. I need to 'get' all sets of radio buttons and iterate though them, and return false of any set does not have a radio button selected. I tried to do something like:

wintas = document.elements[results].legnth

...but no cigar. Is there a way I can grab a results[] array that I can iterate though?

  • Registered: 2011-02-25
  • Posts: 56

Re: Radio button validation

So I made some progress on this the last couple of hours. I found this stackoverflow...

http://stackoverflow.com/questions/1165 … ton-groups

Which has gotten me close, but I'm having trouble trying to decipher the code and modify it to work exactly the way I want.

So my code looks like...

<%= submit_tag 'Submit', :onclick => 'return validate(this)' %><br/>

<script type="text/javascript" charset="utf-8">
  function validate() {
    var radio_groups = {}
    $(":radio").each(function(){
      radio_groups[this.name] = true;
    })
    for(group in radio_groups){
      if_checked = !!$(":radio[name="+group+"]:checked").length
        alert(group+(if_checked?' has checked radios':' does not have checked radios'))
        return false;
    }
   }
</script>

I added the return false so the page does not reload, but I am hitting the alert code each time regardless of whether I click a radio button or not.

Last edited by lumbee (2011-10-26 10:56:39)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Radio button validation

That is what is supposed to happen.

The code you copied will iterate over all the radio buttons on the page, and for each one,  show whether it is checked or not.

You might try something like:

<script type="text/javascript" charset="utf-8">
  function validate() {
    var valid = false;
    var radio_groups = {}
    $(":radio").each(function(){
      radio_groups[this.name] = true;
    })
    for(group in radio_groups){
      if (!!$(":radio[name="+group+"]:checked").length) {
          valid = true;
      }
    }
    if (!valid) {
      alert('you forgot to check a radio button somewhere');
      return false;
    }
  }
</script>
Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • Registered: 2011-02-25
  • Posts: 56

Re: Radio button validation

...hey Brad, same with your code, I never make it past the if statement that would set valid to true. The problem has to be with       

!!$(":radio[name="+group+"]:checked").length)

I'll keep at it...

  • Registered: 2011-02-25
  • Posts: 56

Re: Radio button validation

Thanx again for the help on this Brad. After a stackoverflow post http://stackoverflow.com/questions/7916 … -of-groups I found there was a missing set of single quotes.

Should have been $(":radio[name='"+group+"']:checked").length)  instead of $(":radio[name="+group+"]:checked").length). Entire code I ended up using was...

<script type="text/javascript" charset="utf-8">
  function validate() {
    var valid = true;
    var radio_groups = {}
    $(":radio").each(function(){
      radio_groups[this.name] = true;
    })
    for(group in radio_groups){
      if (!$(":radio[name='"+group+"']:checked").length) {
          valid = false;
      }
    }
    if (!valid) {
      alert('you forgot to check a radio button somewhere');
      return false;
    }
  }
</script>

Last edited by lumbee (2011-10-27 10:20:53)