jquery validation dependent on specific radio button being selected

Question

I am pulling my hair out. For all intents and purposes I think this should work. I only want to validate that a hidden field has a value if certain radio buttons are selected.

Here's what I've got:

$("#myform").validate({
        ignore: "",
        rules: {
            MaritalStatusDate: {
                required: {
                    depends: function () {
                        return $("input[type='radio'].maritalStatusRadio:checked").val() != '1';
                    }
                }
            }
        },
        messages: {
            MaritalStatusDate: {
                required: "You must enter a marital status date"
            }
        }
    });

MaritalStatusDate is the name/id of my hidden field. I've tried about 100 different iterations of this code, and the form gets submitted everytime.

any ideas?

edit: adding html.

<script src="/Scripts/jquery-2.0.3.min.js"></script>
    <script src="/Scripts/jquery.validate.1.11.1.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

        <form action="/cont/meth" id="myform" method="post"> 
        <input class="maritalStatusRadio" data-val="true" data-val-required="The MaritalStatusAnswer field is required." id="maritalStatus_1" name="MaritalStatusAnswer" type="radio" value="1" />
        <input class="maritalStatusRadio" id="maritalStatus_2" name="MaritalStatusAnswer" type="radio" value="2" />
        <input class="maritalStatusRadio" id="maritalStatus_3" name="MaritalStatusAnswer" type="radio" value="3" />
        <input class="maritalStatusRadio" id="maritalStatus_4" name="MaritalStatusAnswer" type="radio" value="4" />
        <input data-val="true" data-val-date="The field MaritalStatusDate must be a date." id="MaritalStatusDate" name="MaritalStatusDate" type="hidden" value="" />
    <input type="submit" value="go" />
        </form>

Include the relevant HTML markup! – Sparky May 14 '14 at 18:03 — Sparky, May 14 '14 at 18:03
Should be `ignore: []` if you want to ignore nothing. – Sparky May 14 '14 at 18:03 — Sparky, May 14 '14 at 18:03
`= "1"` why put a number into a string? – Sterling Archer May 14 '14 at 18:04 — Sterling Archer, May 14 '14 at 18:04

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Without showing your HTML markup, I'm just guessing this is how it looks…

<form id="myform">
    <input type="hidden" name="MaritalStatusDate" />
    <input type="radio" name="radio" value="1" class="maritalStatusRadio" />
    <input type="radio" name="radio" value="0" class="maritalStatusRadio" />
    <input type="submit" />
</form>

In that case, this works...

depends:  function(element) {
    return !($("input[type='radio'].maritalStatusRadio[value='1']").is(":checked"));
}

DEMO: http://jsfiddle.net/nVc2N/

Side-note: It really should be ignore: [] if you want to ignore nothing.

See: https://stackoverflow.com/a/8565769/594235

edited May 23 '17 at 12:13

Community

1
1

answered May 14 '14 at 18:07

Sparky

98,165
25
199
285

ya your jsfiddle does indeed work, but it's still not flying on my solution. I've added my html. Can you see any issues with it? I also updated the depends function to what you have. – Christopher Johnson May 14 '14 at 18:28
ya you're right again. What else could be tripping this up on my end? I've added my script references to my OP in the HTML section. – Christopher Johnson May 14 '14 at 18:41
for whatever reason, when I pulled the validate method out of document.ready, it worked. thanks for your help. – Christopher Johnson May 14 '14 at 19:09
@ChristopherJohnson, I'm glad it worked, but FYI, that makes absolutely no sense, unless your DOM ready event handler never fires. – Sparky May 14 '14 at 19:28

jquery validation dependent on specific radio button being selected

1 Answers1