jQuery Validate does not work on custom radio buttons

Question

I use jQuery Validate plugin for a form. By now I have not succeeded in validating my custom radio buttons. I have read many posts on how to solve this problem, for example using ignore, but this has not helped.

Here comes my little code:

HTML

<form id="my-form" name="my-form" method="post">
    <input type="text" name="myText">

    <p></p>

    <input type="radio" id="my-radio-1" name="myRadio">
    <label for="my-radio-1">selection #1</label>
    <input type="radio" id="my-radio-2" name="myRadio">
    <label for="my-radio-2">selection #2</label>

    <p></p>

    <p>
        <input type="submit" id="my-submit">
    </p>

</form>

JS

$('#my-form').validate({
    rules: {
        myText: {
            required: true
        },
        myRadio: {
            required: true
        }
    },
    errorClass: 'error_validate',
    errorPlacement: function (label, element) {
        label.insertAfter(element);
    }
});

JSFIDDLE with CSS: https://jsfiddle.net/d0nf4pqf/

Anybody knows how to enable validation for the radio buttons?

Answer 1

The problem is intersting. You are using custom styles for radio buttons, and how it works, is that CSS rules hide native input and display styled CSS radio instead. As the result, radio inputs are hidden, but jQuery validation plugin ignores hidden form elements by default.

To fix it you need to instruct plugin that you want hidden fields to be validated too. Use ignore option for this:

$('#my-form').validate({
    // specify rules
    ignore: [],
    rules: {
        myText: {
            required: true
        },
        myRadio: {
            required: true
        }
    },
    // change name of error class that is assigned to input fields
    errorClass: 'error_validate',
    errorPlacement: function (label, element) {
        // default
        if (element.is(':radio')) {
            label.insertAfter(element.next('label'));       
        }
        else {
            label.insertAfter(element);
        }
    }
});

Also note, that you need to fix errorPlacement function in this case too. You can't append error element immediately after input, because (once again due to custom radio styles) then radio check/uncheck won't work (it uses adjacent sibling selector +).

Demo: https://jsfiddle.net/d0nf4pqf/1/