Validate radio buttons with jQuery on submit

Question

I want to validate my form using jQuery. It has groups of radio buttons.

I have found multiple solutions for a single group of radio-buttons or solutions, where you have to specifically say what group-names there are.

Like here: Validate radio buttons with jquery?

The problem is, that the form is being generated at run-time. The questions are saved in a txt file (don't ask, it's a school exercise). The generated HTML-Code looks something like this:

<p>What&#039;s your gender? 

<input type="radio" name="gender" value="m" />Male 
<input type="radio" name="gender" value="f" />Female 

</p>

<p>

How satisfied are you with out support? 
<input type="radio" name="satisfaction" value="0%" />Not at all 
<input type="radio" name="satisfaction" value="25%" />Not very much 
<input type="radio" name="satisfaction" value="75%" />It was ok 
<input type="radio" name="satisfaction" value="100% />It was very satisfying

</p>

The js file is being generated using Twig, so it would be possible to loop through all the radio button groups, but I would like to avoid this if that's possible.

Can't you at least get all the group names directly in jquery, rather than generating tons of jquery code? So I can do the foreach directly in jQuery. Thanks for your effort — IluTov
– IluTov, Commented Nov 5, 2012 at 8:48

CodingIntrigue · Accepted Answer · 2012-11-05 09:06:55Z

1

You would need to add all the groups first (page load would be fine, but make sure the group array is in global scope), then validate each group individually when your form is submitted/button click

var groups = [];
$(function() {
    $("input[type=radio][name]").each(function() {
      // Add the unique group name to the array
      groups[$(this).attr("name")] = true;
    });
});
$("button").click(function() {
    $.each(groups, function(i, o) {
      // For each group, check at least one is checked
      var isValid = $("input[name='"+i+"']:checked").length;
      alert(i + ": " + isValid);
    });
});

answered Nov 5, 2012 at 9:06

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IluTov Over a year ago

groups is an empty array, when the form is submitted. But the function is getting executed. Any idea why? The Each-Block is also working.

IluTov · Accepted Answer · 2012-11-05 10:08:21Z

0

I got it working like this

var groups = [];
$(function() {
    $("input[type=radio][name]").each(function() {
      // Add the unique group name to the array
      if (groups[groups.length - 1] != $(this).attr("name")) groups.push($(this).attr("name"));
    });
});
$('form').submit(function () {
    var isValid = true;

    $.each(groups, function(i, o) {
      // For each group, check at least one is checked
      if (isValid) isValid = $("input[name='"+o+"']:checked").length;  
    });

    if (!isValid) return false;

    return true;
});

Thanks to Blade0rz!

edited Nov 5, 2012 at 10:08

answered Nov 5, 2012 at 10:02

IluTov

6,8486 gold badges44 silver badges108 bronze badges

Collectives™ on Stack Overflow

Validate radio buttons with jQuery on submit

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related