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!

Darin Dimitrov · Accepted Answer · 2012-07-04 16:17:31Z

2

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.

edited Jul 4, 2012 at 16:17

answered Jul 4, 2012 at 16:12

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pawel Krakowiak Over a year ago

@up: THIS! I couldn't wrap my head around what's wrong with my validation code. It was the unobtrusive script from MS. :/

Jeremy Peterson · Accepted Answer · 2012-07-04 16:05:38Z

1

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';
}

edited Jul 4, 2012 at 16:05

answered Jul 4, 2012 at 14:52

Jeremy Peterson

6665 silver badges8 bronze badges

2 Comments

jmogera Over a year ago

drpYesNo is a <select /> and not a <input type="checkbox" /> this would still work?

Jeremy Peterson Over a year ago

I was thrown off by the selector "input:checkbox".

Collectives™ on Stack Overflow

MVC3 Conditional Jquery Validation w/ Dropdown

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related