MVC3 Conditional Jquery Validation w/ Dropdown

Question

I been trying to do some jquery validation where a textfield or dropdown is validated only if a checkbox is checked.

Here is what I have:

@using (Ajax.BeginForm("SomeAction", "SomeController", new { id = Model.Id }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "somePanel", InsertionMode = InsertionMode.Replace }, new { @id = "testForm" }))
{
 @Html.DropDownListFor(x => Model.SelectedValue, Model.YesNoList, " ", new { @id ="drpYesNo" })
 @Html.TextAreaFor(x => x.CriminalText, new { @id = "txtSomeField" })

<input type="submit" value="Save" />
}

In the javascript I have this:

<script type="text/javascript">
    jQuery.validator.messages.required = "";
    $("#testForm").validate(
    {
        rules: {
            txtSomeField: {
                required: function (element) {
                    return $("input:checkbox[name='drpYesNo']:checked").val() == 'Yes';
                }
            }
        }

    });

    $("#testForm").on("submit", function () {
        if (!$(this).valid()) {
            return false;
        }
    });
</script>

I am following some of the example that are online, but can't seem to work. Any help is much appreciated. Happy Fourth of July!

Answer 1

When you define a jquery validator rule you should use the name and not the id of the element you are defining the rule for. So in your case the name of your <textarea> is CriminalText and not txtSomeField (Obviously if this is inside an editor template the name might be different, such as for example Foo.Bar[3].CriminalText ).

So the first step is to use the proper name:

rules: {
    CriminalText: {
        required: function (element) {
            ...
        }
    }
}

Now let's see the second step. In your selector you used some :checkbox that I cannot see anywhere in your DOM. All I can see (at least in what you have shown here) is a DropDownList and a textarea. So if you want the <textarea> to be required only if the user selected the value Yes inside the <select> list, here's how you could define the rule:

rules: {
    CriminalText: {
        required: function (element) {
            return $('#drpYesNo').val() == 'Yes';
        }
    }
}

This obviously assumes that you have the following option selected:

<select>
    <option value="Yes">Yes, of course</option>
    ...
</select>

And one final remark: make sure that you have not included the jquery.validate.unobtrusive.js script to your page as it will use Microsoft's unobtrusive library to automatically write the jQuery.validate rules based on the HTML5 data-* attributes generated by the helpers and thus completely messing up your custom rule setup.

Answer 2

The selector here is the problem, using input:checkbox is for checkboxes. Typically, jquery prefers css class names or id's.

required: function (element) {
  return $("#drpYesNo").val() === 'Yes';
}