Select2 Drop down removes the required border color?

Question

In my application, the required fields border show in red color. I wrote the following css for required fields:

input[data-val-required], select[data-val-required] {
    border: 1px solid #EFA4A4 !important;
}

select[data-val-required], select[data-val-required] {
    border: 1px solid #EFA4A4 !important;
}

It was working fine for me. Then i need to use Select2 Drop down in the application. I add class select-two for those drop down which are required like this:

@Html.DropDownListFor(model => model.DocumentId, new SelectList(Model.Documents, "LRMISDocumentId", "DocumentName"), Resources.Select, new { id = "documents", Class = "select-two form-control" })

Then i implement select2 where select-two class is used. Now the problem is when i use select2 dropdown the red border disappears. What is the problem?

What should i do for required fields where select2 implimented? — Umer Waheed, Oct 13 '16 at 07:06
You can set the CSS using ID of Select element instead of setting it for generic select element. — AshishJindal, Oct 13 '16 at 07:08
There are numerous issues with this. `jquery.validate.js` does not validate hidden fields, so you need to override the validator (refer [this answer](http://stackoverflow.com/questions/33935671/attaching-jquery-validation-to-replacement-element/33937362#33937362). Then you will probably need to handle the `.change()` event to determine if its valid or not (the `.isValid()` function) and if not, add another class name that adds the border (you will need to inspect the html and css that is being generated by Select2 — , Oct 13 '16 at 07:10
@Umer : Check this link- http://stackoverflow.com/questions/37130371/how-to-define-css-style-for-fields-marked-as-required — AshishJindal, Oct 13 '16 at 07:19
I already did this. The problem is when i use select2, it removes the red border. — Umer Waheed, Oct 13 '16 at 07:24

score 1 · Accepted Answer · edited Oct 13 '16 at 22:38

1

This will work:

<style type="text/css">
    .select2-container--default{
        border-radius: 5px;
        border: 1px solid red;
    }
</style>

https://jsfiddle.net/kblau237/g44g902o/ is the jsfiddle without the Microsoft MVC API

edited Oct 13 '16 at 22:38

Community

1
1

answered Oct 13 '16 at 19:20

kblau

2,094
1
8
20

It is not related to my question. Actually i want to show red border where fields are required. However, i resolved issue by creating new class and implement this class where fields are required. And your answer help me in this case. Thanks. – Umer Waheed Oct 18 '16 at 04:54

Select2 Drop down removes the required border color?

1 Answers1