select is not applying validate style

[harrysonguimaraes]

How to apply .validate style to select elements?
That is how my form looks like when i select an item and input some text in the other inputs. It's kind inconsistence with my other inputs.

[stalmok]

I have the same problem with checkboxes too. Actual <input> elements are moved off the screen, but they should only be invisible.

[fernandoPalaciosGit]

To improvise a solution, change the position of ordered elements into .select-wrap, online 2786, put it after select input:

$select.after($newSelect);
$newSelect.after(dropdownIcon);

and now You can selector css

select.invalid ~ .select-dropdown {
      border-bottom: 1px solid #F44336;
}

[cbruyndoncx]

I'm using this hack incombination with civem.js (custom html5 error messages in multi-language - not just browser language).
The small difference is in the css, civem.js flags validation error with the .error class, so the css becomes

select.error ~ .select-dropdown {
      border-bottom: 1px solid #F44336;
}

[syberknight]

FYI...
i found a solution @ http://stackoverflow.com/a/34809423/1247334

yes, it's a workaround & i don't know if it's the best way to go about it or not, but it's the ONLY way i've been able to get my Materialize Selects to validate.

i use Jquery Validate, & just copy/pasted it in right after my "Rules" & "Messages" & worked right off the bat. then the css styling was all i had to tweak a little.
-2¢

[gharia]

I also had the same issue, I was able to solve it with a hack which I have mentioned in detail at http://stackoverflow.com/questions/34248898/how-to-validate-select-option-for-materialize-dropdown/38671029#38671029

[ianarsenault]

Anyone find a solution that actually changes the validation styling once an option is selected, much like every other input field does once the input field has the required value/text inside of it?

[bibislayer]

I'm using this but really not sure is the best practice =>
in app.component.ts

ngDoCheck() {
    let selectorValid = $('.select-wrapper:has(select.ng-dirty.ng-valid)');
    if(selectorValid.length > 0){
      selectorValid.removeClass('ng-untouched ng-pristine ng-invalid');
      selectorValid.addClass('ng-dirty ng-valid');
    }
    let selectorInvalid = $('.select-wrapper:has(select.ng-dirty.ng-invalid)');
    if(selectorInvalid.length > 0){
      selectorInvalid.removeClass('ng-untouched ng-pristine ng-invalid');
      selectorInvalid.addClass('ng-dirty ng-invalid');
    }
  }

And on main css =>

.select-wrapper.ng-dirty.ng-valid .select-dropdown {
  border-bottom: 1px solid #4CAF50 !important;
  box-shadow: 0 1px 0 0 #4CAF50 !important;
}
.select-wrapper.ng-dirty.ng-invalid .select-dropdown {
  border-bottom: 1px solid #F44336 !important;
  box-shadow: 0 1px 0 0 #F44336 !important;
}

[rodrigorrl]

@harrysonguimaraes Tenho o mesmo problema. Conseguiu resolver?

[Dogfalo]

fixed in 97c450b

[eduardoalcantara]

$(document).ready(function(){
    $('.tooltipped').tooltip(); // dica que aparece quando o usuário põe o mouse em cima do componente
    $('select').formSelect(); // montagem de campos <select> com material design
    // isto corrige o problema de renderização em campos select que exigem validação quando o campo é de preenchimento obrigatório
    const _requiredSelects = $("select[required].validate");
    _requiredSelects.parent().find('input').addClass('validate').attr('required', true)
    .keydown(function($event) { 
        return $event.keyCode == 9;
    });
    _requiredSelects.change(function($event) { 
        const _select = $event.target;
        const _value = $(_select).val();
        const _input = $(_select).parent().find('input');
        _input.removeAttr('readonly', '');
        _input.val(_select.options[_select.options.selectedIndex].label);
        if (_value != '') {
            _input.addClass('valid');
            _input.removeClass('invalid');
        } else {
            _input.addClass('invalid');
            _input.removeClass('valid');
        }
    });
    _requiredSelects.each(function(){
        const _this = $(this);
        const _helper = _this.parent().parent().find('.helper-text');
        if (_helper !== undefined) {
            const _input = _this.parent().find('input');
            _helper.insertAfter(_input);
        }
    });
});