MVC 5 Conditional Validation Option?

Question

I'm developing an MVC 5 web application. Within a particular View I need to validate a ViewModel, however, I need some of the validation only to occur depending on the users inpupt.

For example, I have a ViewModel

public class TimeEntryViewModel
{
    public int proposalID { get; set; }
    public int proposalCode { get; set; }
    public int nonchargeCode { get; set; }

    public SelectList UserProposals { get; set; }
    public SelectList TimeEntryClientCodes { get; set; }
    public SelectList TimeEntryNonChargeCodes { get; set; }
}

This ViewModel is passed to a View which looks like this

<div class="form-group">
    @Html.LabelFor(m => m.proposalID, "Proposal")
    @Html.DropDownListFor(m => m.proposalID, Model.UserProposals, "No Proposal", new { @class = "form-control"})
    @Html.ValidationMessageFor(m => m.proposalID)
</div>
<div id="ClientCodes" class="form-group" style="display:none">
    @Html.LabelFor(m => m.proposalCode, "Client")
    @Html.DropDownListFor(m => m.proposalCode, Model.TimeEntryClientCodes, "Select", new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.proposalCode)
</div>
<div id="NonChargeCodes" class="form-group">
    @Html.LabelFor(m => m.nonchargeCode, "Non Charge")
    @Html.DropDownListFor(m => m.nonchargeCode, Model.TimeEntryNonChargeCodes, "Select", new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.nonchargeCode)
</div>

If the user selects 'No Proposal' from the first drop down list, then the drop down list 'nonchargeCode' appears and I need to validate so that the user selects an option from it.

However, if the user selects another option from the first down drop list, then the drop down list 'nonchargeCode' will disappear and another drop down called 'proposalCode' will appear. I then want to validate to ensure the user selects an option from this drop down, but not the 'nonchargeCode' (which will be hidden).

In an MVC 4 application I previously coded, I used http://fluentvalidation.codeplex.com/ to help with this scenario.

I'm just wondering if anyone else had used anything else to overcome this problem of conditional validation? If so, I'd be keen to hear.

Thanks again.

Answer 1

You can use conditional validation in jQuery and in fluentvalidation.

You can use a jQuery selector on the validation, something like this. I'm not sure about the HTML element names.

$( "#myform" ).validate({ rules: { proposalCode: { required: "#proposalCode:visible" } }

Check out jQuery Dependency expression for more information.

In FluentValidation validation (Server side only) you can use the 'When' expression.

RuleFor(r => r.proposalCode).NotNull().When(e => // Check selected value);

Check out the documentation here

I think this should get you started.