Question

I am trying to bassistance plugin for my form validation, now my form consists of several radio button groups, some of them are “required”.

Now,

1. how do I make sure that all those radio groups did recieve a value?
2. Once the user have propely set them, where and how do I check the values of those radio buttons before proceeding with submission?

Answer 1

Are you asking how you can use the plugin? It’s pretty well-documented, but anyway these snippets should assist. Here I take a simple form with two lots of radio-button groups, validate them using the plugin. The main things to note in the validation code are that we have two handler callbacks (for ‘invalid’ and ‘success’ states) plus a set of validation rules to apply.

First, the example form:

<form id="your-form">
    <fieldset>
        <p>
            <label for="group_one">Select an option (required)</label>
            <input type="radio" name="group_one" id="opt1-1">Option 1
            <input type="radio" name="group_one" id="opt1-2">Option 2
            <input type="radio" name="group_one" id="opt1-3">Option 3
        </p>
        <p>
            <label for="group_two">Select an option here too (required)</label>
            <input type="radio" name="group_two" id="opt2-1">Option 1
            <input type="radio" name="group_two" id="opt2-2">Option 2
            <input type="radio" name="group_two" id="opt2-3">Option 3
        </p>

        <p><input name="submit" type="submit" id="submit" value="Save" /></p>
    </fieldset>
</form>

… and second, the validation code:

$(document).ready(function(){
    $("#your-form").validate({
        invalidHandler: function(form, validator){
            var errors = validator.numberOfInvalids();
            var message = (errors == 1) ? "One of your groups won't validate." : "Neither of your groups will validate.";
            alert(message);
        },
        submitHandler: function(){
            alert("Everything's OK, both radio button groups are set.");
            $('#your-form').ajaxSubmit()
        },
        rules: {group_one: {required: true}, group_two: {required: true}}
    });
});

Does that help?