RequiredIf Not Firing Client Side Validation Styling

Question

In my Model I have this:

[RequiredIf("Operation", 2)]
public string Test_Type { get; set; }

I am using MVC Fool Proof Validation.

In my view:

<div class="col-md-6 form-group">
    <label class="col-md-4 control-label">Operation Type: <span class="fa fa-asterisk text-danger"></span></label>
    <div class="col-md-8">
        @Html.DropDownListFor(model => model.Operation, (IEnumerable<SelectListItem>)ViewBag.OperationChoice, "-- Select Operation --", new { @class = "form-control" })
        <br />
        @Html.ValidationMessageFor(model => model.Operation, "", new { @class = "text-danger" })
    </div>
</div>

<div class="row" id="TestType-div">
    <div class="col-md-6 form-group">
        <label class="col-md-4 control-label">Type Of Test: <span class="fa fa-asterisk text-danger"></span></label>
        <div class="col-md-8">
            @Html.DropDownListFor(model => model.Test_Type, (IEnumerable<SelectListItem>)ViewBag.Test_TypeChoice, new {@class = "form-control"})
            <br/>
            @Html.ValidationMessageFor(model => model.Test_Type, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

This validation is working, but it does not highlight the Test_Type dropdownlist in a red outline with the css class input-validation-error. How do I use the RequiredIf annotation in a way that when the form is invalid, it highlights the field with the input-validation-error class name?

Check This Code Online Codepen.io

Answer 1

To enable client validation, include MvcFoolproofValidation.js with the standard client validation script files:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/MvcFoolproofValidation.js" type="text/javascript"></script>

jQuery Validation If you are using jQuery validation, include MvcFoolproofJQueryValidation.js with the standard client validation script files:

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-validate.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script src="../../Scripts/MvcFoolproofJQueryValidation.js" type="text/javascript"></script>

MVC 3 jQuery Unobtrusive Support

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/mvcfoolproof.unobtrusive.js")" type="text/javascript"></script>

If still client side validation not showing check that your drop-down has input-validation-error class. if class is present and not showing red border then add style :

.input-validation-error
{
    border: 1px solid #CD0A0A;
}

Answer 2

There are a couple of ways you can do this, if an error occurred in a validation it would have the class input-validation-error. So you can just style that class like:

.input-validation-error{
   border-style: solid;
   border-color: #ff0000;
}

Or if you want to be specific to that drop-down you can do a simple trick to like this: First create a class like red-border

.red-border {
    border-style: solid;
    border-color: #ff0000;
}

Then add a viewbag data like @ViewBag.Test_Type_Border in your dropdown like this:

@Html.DropDownListFor(model => model.Test_Type, (IEnumerable<SelectListItem>)ViewBag.Test_TypeChoice, new {@class = "form-control " + @ViewBag.Test_Type_Border})

Make sure there is a space between the form-control and the ViewBag

Now is your controller, If the model state is not valid check if the dropdown value is empty, and if so set the @ViewBag.Test_Type_Border like this:

if (ModelState.IsValid){
//Your code if model state is valid
}
//if it is not valid then check if the dropdown field is empty
if (string.IsNullOrEmpty(model.Test_Type))
{
     //Set the viewbag to the class red-border
     @ViewBag.Test_Type_Border = "red-border";
}

Then return to the view, the dropdown would now have a red border