javascript - jQuery Validate does not work on custom radio buttons - Stack Overflow

admin管理员组

文章数量:1317898

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 es 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: /

Anybody knows how to enable validation for the radio buttons?

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 es 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/d0nf4pqf/

Anybody knows how to enable validation for the radio buttons?

• javascript
• jquery
• jquery-validate

Share Improve this question Follow edited Mar 29, 2015 at 15:12 Sparky 98.8k2626 gold badges202202 silver badges290290 bronze badges asked Mar 29, 2015 at 12:53 MaxMax 86022 gold badges1414 silver badges3333 bronze badges 2

• @charlietfl I don't know what you mean. could you please make this modification in my jsfiddle, save a new version and post the link? thanks – Max Commented Mar 29, 2015 at 13:00
• 2 All you have to do is to add ignore option, because your native radios are in fact hidden. Hidden elements are NOT validated by default, unless they're removed from validate's ignore array : jsfiddle/bywnwL77 – Artur Filipiak Commented Mar 29, 2015 at 13:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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/d0nf4pqf/1/

本文标签： javascriptjQuery Validate does not work on custom radio buttonsStack Overflow