Validation Dropdown Issue

[mmuhamadamirzaidi]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [ /] I am running the latest version
• [/ ] I checked the documentation and found no answer
• [/ ] I checked to make sure that this issue has not already been filed
• [ /] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Should highlight the dropdown border for valid/invalid just like the other input.

Screenshot how it should work

Current Behavior

The validation feedback is working, but it doesn't highlight the dropdown border for valid/invalid. It used the primary color as we select the selection.

Dropdown Select

Screenshot invalid

Screenshot valid

Code Snippet

<div class="form-group">
<label class="form-control-label" for="user-schedule">Work Schedule</label>
<select class="form-control" data-toggle="select" id="user-schedule" required>
<option value="">Select Work Schedule</option>
<option value="1">Schedule 1</option>
<option value="2">Schedule 2</option>
</select>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please select the work schedule!
</div>
</div>

Failure Information (for bugs)

Please help provide information about the failure if this is a bug.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Click the submit button for submitting the form.
2. All input validation was good, except for the dropdown selection.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device: Computer
• Operating System: Windows
• Browser and Version: Google Chrome Version 84.0.4147.135 (Official Build) (64-bit)

[rarestoma]

Hi @mmuhamadamirzaidi,

Thank you for working with our products.

Can you please give show us how did you implement the javascript of the validation so I can test it closely? It should add 'is-valid' / 'is-invalid' classes to the input so the border will turn to green(success)/red(error).

Thank you,
Rares

[mmuhamadamirzaidi]

Hi @rarestoma,

Thanks for your reply.

I used the needs-validation class in the form tag, and also valid-feedback/ invalid-feedback class in the feedback. All the input type like text input, number, file, and normal dropdown are working fine, unless for search dropdown.

Sample form code I used:

Sample code for text input:

Output after validate:

Sample code for file input:

Output after validate:

Normal dropdown:

Sample code for search dropdown with data-toggle="select":`

Output after validate:

When select search dropdown:

Valid:

Even after select, it takes the primary color as border color, not the green.

Invalid:

For invalid, it doesn't put red color. The valid-feedback/ invalid-feedback feedback is working fine.

Please help me to solve this. Thanks in advance.

[rarestoma]

Hi @mmuhamadamirzaidi,

Thank you for providing me all the details.

Can you please add these lines on the CSS and try again?

.was-validated .form-control:valid  ~ .select2 .select2-selection{
  border: 1px solid #2dce89;
}

.was-validated .form-control:invalid  ~ .select2 .select2-selection{
  border: 1px solid #fb6340;
}

I tested it and now the border of the selects turns to green/red when is valid/invalid.

Please let me know if it works.

Thank you,
Rares

[mmuhamadamirzaidi]

Hi @rarestoma,

Thanks for your time and respond to help me out to solve the validation search dropdown issue. And yeah, your solution works like charms!

I appreciate your kindness and support. Once again, thanks!

Sincerely,
Muhamad Amir