Required validation not working for me

[gnsalaskar]

Required validation not working for me

<div class="col-md-4 col-sm-6"> <select asp-for="BranchId" class="js-choice" placeholder="Select Branch" size="1" required data-options='{"config": {"removeItemButton":true,"placeholder":true }}'> <option value="">Select Branch</option> <option value="1">1</option> </select> <div class="invalid-feedback">Please select home branch.</div> </div>

wanted to show while submit if not selected Home branch
message will be displayed "Please select home branch"
Note: For simple dropdown it will be the work (Just remove data-option="{..}")

Please some one help with this my issue
that will be the great to be me.

[AddMoreScripts]

@gnsalaskar
I've noticed that the browser's built-in validation doesn't work. This is due to the fact that in CSS choises.min.css on the select styles are set:

.choices [hidden] {
  display: none!important;
}

And in the chome console will be shown error message about this:

If you override the styles to make <select> hidden in a way other than display:none, then the browser's validation message will still work. For example:

.choices [hidden]{
  display: block !important;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}