Topic: Input validation is broken when focused

Jonathan Yates pro asked 6 years ago

Hi, I have been trying to use the input control with validation states has-success, has-warning and has-danger bootstrap 4 classes and the MDB theme breaks the expected behaviour. Using the example from the bootstrap docs the expected behavior when setting either of these classes on the form-group when the input is focused is for the input to show the correct colour state (i.e. Red for has-danger). However the input shows the default primary colour instead when focused when any of the validation states are set. i.e. Here is an example: <div class="form-group has-danger"> <label class="form-control-label" for="inputDanger1">Input with danger</label> <input type="text" class="form-control form-control-danger" id="inputDanger1"> <div class="form-control-feedback">Sorry, that username's taken. Try another?</div> </div> Using default bootstrap 4 this input remains Red when focused. However, when applying MDB it appears blue. I am also experiencing issues where the input does not show the correct validation colour when I focus out of the input. I can query the classes on the input and find that it includes 'has-danger' yet the control shows up green. At the moment, having purchased MDB, I am finding input validation unusable. Please can you confirm whether this is a bug and advise the best approach to get the expected bootstrap 4 behaviour? Regards, Jonathan Yates

Jonathan Yates pro answered 6 years ago

Hi, I managed to resolve this by providing the following css .has-danger .form-control-label { color: #d9534f !important; } .has-success .form-control-label { color: #00C851 !important; } Without this the label is always blue when focused so I suspect this is a bug.

Could you please provide a screenshot?

Jonathan Yates pro answered 6 years ago

Thanks for your reply. I have applied this style and confirm the form-control now does receive the correct color when focused. However the associated label doe not. The label is always blue when focused even though the form-group is set to has-danger. Therefore I now have a red line under the input but the label is blue. This is also the same for has-success, the input is green but the label is blue when focused.

Hi, Jonathan! Sorry for late reply. We had a long weekend here. You're right it's a bug. This will be fixed. Try this code:
.has-danger .form-control:focus {
    border-bottom: 1px solid #d9534f !important;
    box-shadow: 0 1px 0 0 #d9534f !important;

Jonathan Yates pro answered 6 years ago

So what exactly am I paying for the Pro Premium Support? Nothing it seems. Very disappointing.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No