How to get jQuery Tools validation working on a group of radio buttons?

Question

Just can't figure it out... (and judging from a long bout of web searches, I'm not the only one.) I have jQT validation working properly otherwise; just not for radios -- all I want to do is confirm that at least one of the buttons has been clicked. I've been experimenting with setting up a custom validation function via $.tools.validator.fn, but I can't find the right thing to use for the selector. I didn't have much luck looking at the source code; any advice out there? Thanks!

This question seems similar: http://stackoverflow.com/questions/277589/validation-of-radio-button-group-using-jquery-validation-plugin. — Jason Towne, May 16 '12 at 21:31

score 2 · Answer 1 · edited Jan 02 '14 at 07:26

I have to admit that this is a hack, and needs to be adapted to your needs. Here's what I came up with and there may be better options out there.

Sample markup:

<form action="" id="theForm">
    <fieldset>
    <input type="radio" name="sex" value="male" id="male" class="requiredCheckbox" /> <label for="male">Male</label><br />
    <input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label><br/>
    <input type="radio" name="sex" value="unknown" id="unknown" /> <label for="unknown">Unknown</label>
    </fieldset>

    <input type="button" id="validate" value="Validate" />
</form>

Javascript with custom validation method and a little hackery:

$.validator.addMethod('requiredCheckbox', function (val, elt) {
    var valid = false;

    $('input[name=' + $(elt).attr('name') + ']:radio').each(function(inx, elt) {
        if (elt.checked === true) {
            valid = true;
            return;
        }
    });

    return valid;
}, 'Select at least one checkbox');

var options = {
    errorPlacement: function(error, elt) {
        $(elt).before(error);
    },
    errorElement: 'div'
};
var validator = $('#theForm').validate(options );

$('#validate').click(function() {
    $('#theForm').valid();
});

Here's JSFiddle with a working sample: http://jsfiddle.net/9DRcz/

Fun problem to work out though :-)

A good start! There's a catch in that I was looking for a way to get the validator in jQuery Tools (not raw jQuery) to work, since I'm using that elsewhere in my code. But I've gotta have radio button validation, so I may have to suck it up and switch to the code that works. I'll likely be back with more on this... — Jim Miller, May 16 '12 at 22:16

score 2 · Answer 2 · edited May 23 '17 at 11:51

Where I am (or ended up):

I gave up on trying to get the validation stuff in jQuery Tools to work with radio buttons.
@MK_Dev got me on the path to using the jQuery Validation plugin (http://bassistance.de/jquery-plugins/jquery-plugin-validation/), for which much thanks. However, the additional method in his answer wasn't needed -- I'm getting radio button validation by loading the validation plugin, giving one of the radio buttons a class of "required", and calling .validate() on the form. Works fine.
@jason's reference to Validation of radio button group using jQuery validation plugin also paid off. My last bit of confusion about all this is that there's some discussion on that page about how the bassistance validation plugin isn't needed -- that jQuery (1.3.2??) can do validation all by itself. Could be, but I couldn't figure it out.

In any case, I now have some working validation, which is more than I could say earlier today. Thanks to all!

score 2 · Answer 3 · answered Jul 23 '13 at 21:52

I got it to work. They don't give any radio button examples in the jQueryTools Validator documentation though: http://jquerytools.org/documentation/validator/index.html

Here is the relevant source code.

In the page head, include:

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

<script>
$(document).ready(function() {
  $("#myform").validator();
});
</script>`

In the page body:

<form id="myform" name="myform" method="post" action="next-page.php">
  <label>Option One</label>
    <input type="radio" required="required" name="RadioGroup1" id="RadioButton_1" />
  <label>Option Two</label>
  <input type="radio" required="required" name="RadioGroup1" id="RadioButton_2" />
    <label>Option Three</label>
  <input type="radio" required="required" name="RadioGroup1" id="RadioButton_3" />

  <input type="submit" name="continue_to_next_page" id="submit" value="Continue" />
</form>

Let us know if it works for you.

How to get jQuery Tools validation working on a group of radio buttons?

3 Answers3