How to validate select input?

[faizplus]

I just want to use HTML5 required attribute to make a select box required but it is not working in materializecss select. Please help!

It also raises error on console An invalid form control with name='name_of_input' is not focusable.

[Dogfalo]

This is how html works, you must have an empty value for the first option for required to work On Aug 6, 2015 5:18 AM, "Jimish Fotariya" notifications@github.com wrote:

I have faced same problem, and i resolved it by comparing select box value with its Label name in before submit function.

— Reply to this email directly or view it on GitHub https://github.com/Dogfalo/materialize/issues/1861#issuecomment-128345495 .

[chi-bd]

you must have an empty value for the first option

No, this is another problem. Please test this patch.

$(document).ready(function() {
    $("select").material_select();

    // for HTML5 "required" attribute
    $("select[required]").css({display: "inline", height: 0, padding: 0, width: 0});
}

[rhuanbarreto]

@chi-bd can you explain why this patch works?

[chi-bd]

(link to #2028) This is "Egg of Columbus". Meterial-select makes the original <select> DOM hidden("display: none"). On the other hand, validation message of HTML5 isn't output when the validation target DOM is hidden(at least IE & Chrome). To cope with both, the CSS of <select> will set to display by size "0".

[TomFreudenberg]

Hi @chi-bd thanks for post

I have made some improvements, now it look pretty nice to me.

    $('select[required]').css({
      display: 'inline',
      position: 'absolute',
      float: 'left',
      padding: 0,
      margin: 0,
      border: '1px solid rgba(255,255,255,0)',
      height: 0, 
      width: 0,
      top: '2em',
      left: '3em'
    });

Cheers Tom

[brunakov]

The patches provided leave a red dot under the select element on FF ESR 45.7.0 (Debian Jessie 8).

[TomFreudenberg]

Hi @atomtm

could you check if this happened at the forms on https://meetus.koella.com also?

I can't see any red dot so far but don't use Debian currently.

[brunakov]

@TomFreudenberg perhaps you have to zoom a bit to clearly see it .

[TomFreudenberg]

@atomtm Yeah, see that ...

I guess this might be the "active" indicator from FF to show "you are on the field" and just catch some nasty pixels ...

Okay ... I can reproduce this on FF 50 on MacOS as well (not on Chrome nor Safari) ... Just click into the field "First Name" and "Shift-TAB" (use keyboard) to select previous field. Within this action ... there is also a dot ...

Seems to be on FF only

[brunakov]

@TomFreudenberg Opera leaves a small triangle. http://imgur.com/a/y6CNf.

[TomFreudenberg]

Hm ... so that needs more / better adjustment or fix ...

[brunakov]

If you come up with something else please let me know !

[hylke94]

When does this come to the base code?

[shanehoban]

Adding opacity: 0 to Tom's fix gets rid of that red circle in FF. Edit: and it works as intended

$('select[required]').css({
      display: 'inline',
      position: 'absolute',
      float: 'left',
      padding: 0,
      margin: 0,
      border: '1px solid rgba(255,255,255,0)',
      height: 0, 
      width: 0,
      top: '2em',
      left: '3em',
      opacity: 0
    });

[Dogfalo]

fixed in 97c450b

[mrdnote]

I also had to add pointerEvents: 'none'; to the css override, else the old select was still clickable!

My workaround for the select validation: http://jsfiddle.net/b8frk03m/6/

[AJLeonardi]

This issue appears to be present in rc2.

When I add required to my select, I get this message In the console (same as the original issue report): An invalid form control with name='name_of_input' is not focusable.

The browser wants to add the validation message to the and it can't because it's hidden.

adding the javascript referenced above fixed it.

$('select[required]').css(...)

baccarg commented 6 years ago

Confirm. Still here in RC2

baccarg commented 6 years ago

@Dogfalo check this . TY!

nikolaysm commented 6 years ago

+1

4selin commented 5 years ago

still no validation for select input?

findsarfaraz commented 5 years ago

no validation for select input.

daslani commented 5 years ago

@Dogfalo seems like the npm registry 1.0.0 package doesn't include this while the GitHub repo master does. Is it something that can be updated reasonably easily?

austinbachman commented 5 years ago

Any updates here? Still exists on 1.0.0.

rlugge commented 5 years ago

Can confirm, still an issue on 1.0.0 even with a 'default' disabled answer available.

honkeat commented 5 years ago

The problem persists. html5 required not working still for select input, showing the same problem.

BenBitDesign commented 5 years ago

@Dogfalo This issue seems to persist still. Same is happening for me.

icavalheiro commented 4 years ago

Fix appears to be there for 0.100 but not for 1.0

coendr commented 3 years ago

if people still need a fix i use this: $(document).ready(function () { $('select').formSelect(); $('select[required]').css({ display: 'inline', position: 'absolute', float: 'left', padding: 0, margin: 0, border: '1px solid rgba(255,255,255,0)', height: 0, width: 0, top: '3em', left: '7.5em', opacity: 0 });

eduardoalcantara commented 2 years ago

$(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);
        }
    });
});

DanDanilyuk commented 10 months ago

Here is an example without JQuery:

const selectElems = document.querySelectorAll('select[required]');
selectElems.forEach(selectElem => {
  selectElem.style.display = 'inline';
  selectElem.style.position = 'absolute';
  selectElem.style.float = 'left';
  selectElem.style.padding = 0;
  selectElem.style.margin = 0;
  selectElem.style.border = '1px solid rgba(255,255,255,0)';
  selectElem.style.height = 0;
  selectElem.style.width = 0;
  selectElem.style.top = '2em';
  selectElem.style.left = '3em';
  selectElem.style.opacity = 0;

  M.FormSelect.init(selectElem);
});

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[baccarg]

Confirm. Still here in RC2

[baccarg]

@Dogfalo check this . TY!

[nikolaysm]

+1

[4selin]

still no validation for select input?

[findsarfaraz]

no validation for select input.

[daslani]

@Dogfalo seems like the npm registry 1.0.0 package doesn't include this while the GitHub repo master does. Is it something that can be updated reasonably easily?

[austinbachman]

Any updates here? Still exists on 1.0.0.

[rlugge]

Can confirm, still an issue on 1.0.0 even with a 'default' disabled answer available.

[honkeat]

The problem persists. html5 required not working still for select input, showing the same problem.

[BenBitDesign]

@Dogfalo This issue seems to persist still. Same is happening for me.

[icavalheiro]

Fix appears to be there for 0.100 but not for 1.0

[coendr]

if people still need a fix i use this: $(document).ready(function () { $('select').formSelect(); $('select[required]').css({ display: 'inline', position: 'absolute', float: 'left', padding: 0, margin: 0, border: '1px solid rgba(255,255,255,0)', height: 0, width: 0, top: '3em', left: '7.5em', opacity: 0 });

[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);
        }
    });
});

[DanDanilyuk]

Here is an example without JQuery:

const selectElems = document.querySelectorAll('select[required]');
selectElems.forEach(selectElem => {
  selectElem.style.display = 'inline';
  selectElem.style.position = 'absolute';
  selectElem.style.float = 'left';
  selectElem.style.padding = 0;
  selectElem.style.margin = 0;
  selectElem.style.border = '1px solid rgba(255,255,255,0)';
  selectElem.style.height = 0;
  selectElem.style.width = 0;
  selectElem.style.top = '2em';
  selectElem.style.left = '3em';
  selectElem.style.opacity = 0;

  M.FormSelect.init(selectElem);
});