Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Select validation not working

alvintng pro asked 6 years ago


The select validation does not work generally. More importantly, the select validation works in a stepper but does not put in the 'invalid' class on the select - but everything else works fine.


Sebastian Kaczmarek staff commented 6 years ago

What kind of validation are you talking about? Our Select supports HTML5 validation, such as `[required]` for example. But you have to put it in the `<form>` element to make it work


gianlucagiacometti priority answered 6 years ago


You can solve it with javascript

suppose you have

<select name="month" id="example-select-month" class="mdb-select md-form colorful-select dropdown-ins" required>
<option value="" disabled selected>Select month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<select>

you can add the code

if (!$('#example-select-month').val()) {
$('#example-select-month').prev().prev().css('border-bottom-color', 'rgb(220, 53, 69)');
}
$('#example-select-month').on('change', function() {
if ($(this).val()) {
$(this).prev().prev().css('border-bottom-color', 'rgb(40, 167, 69)');
}
});

Bartłomiej Malanowski staff commented 6 years ago

Thank you for sharing your solution!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Laptop
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No