css - Html.DropDownListFor() Validation works but field does not turn red -

css - Html.DropDownListFor() Validation works but field does not turn red -

i have seen number of similar questions , answers regarding dropdownlistfor validation, have not seen particular problem.

this html helper.

vb:

@html.dropdownlistfor(function(model) model.acclev, new selectlist(model.items), "select accuracy level", new {.class = "form-control"})

c#:

@html.dropdownlistfor(model => model.acclev, new selectlist(model.items), "select accuracy level", new { @class = "form-control" })

this helper validates fine if drop downwards selection not made, , displays validation message, field not alter reddish border other textboxfor() helpers using same "form-control" class.

this must css styling issue don't know find problem. have looked @ bootstrap.css , site.css files there nil out of ordinary can see in either of them.

edit:

the next shows how html helper nested within table row within view:

<tr> <td> <div class="editor-label"> @html.labelfor(function(model) model.acclev) </div> <div class="editor-field"> @html.dropdownlistfor(function(model) model.acclev, new selectlist(model.items), "select accuracy level", new {.class = "form-control"}) @html.validationmessagefor(function(model) model.acclev) </div> </td> <td> <div class="editor-label"> @html.labelfor(function(model) model.units) </div> <div class="editor-field"> @html.textboxfor(function(model) model.units, new {.class = "form-control"}) @html.validationmessagefor(function(model) model.units) </div> </td> </tr>

naturally table within form, otherwise not able utilize html helpers. @html.dropdownlistfor() helper 1 having problems with. stated, validation works fine helper using form-control class, dropdown list field not turn reddish should, when selection not made. @html.textboxfor() helper using same form-control class validates , changes it's color reddish should.

it has been suggested utilize "has-error" class beingness implemented within bootstrap.css snippet below shows:

.has-error .form-control { border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }

the confusion having why form-control class working textboxfor html helper not dropdownlistfor helper?

here output looks these 2 helpers:

the parent element of command must have .has-error class:

<div class="form-group has-error"> <label class="control-label" for="inputerror1">input error</label> <input type="text" class="form-control" id="inputerror1"> </div>

http://getbootstrap.com/css/#forms-control-validation

html css twitter-bootstrap asp.net-mvc-5 form-control