Materialize: How to validate select input?

Created on 6 Aug 2015  Â·  28Comments  Â·  Source: Dogfalo/materialize

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.

bug Select
Source
picture faizplus
👍5 👎1

Most helpful comment

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});
}
picture chi-bd on 23 Dec 2015
👍25 🎉7 ❤4 😄3

All 28 comments

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" [email protected] 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
.

Dogfalo picture Dogfalo on 7 Aug 2015
😕2 👎2

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});
}
chi-bd picture chi-bd on 23 Dec 2015
👍25 🎉7 ❤4 😄3

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

rhuanbarreto picture rhuanbarreto on 23 Apr 2016

(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".

chi-bd picture chi-bd on 23 Apr 2016

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

TomFreudenberg picture TomFreudenberg on 25 Jan 2017
👍7

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

atomtm picture atomtm on 9 Feb 2017
👍1

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.

TomFreudenberg picture TomFreudenberg on 9 Feb 2017

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

atomtm picture atomtm on 9 Feb 2017

@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

TomFreudenberg picture TomFreudenberg on 9 Feb 2017
👍1

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

atomtm picture atomtm on 9 Feb 2017

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

TomFreudenberg picture TomFreudenberg on 9 Feb 2017
👍1

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

atomtm picture atomtm on 9 Feb 2017

When does this come to the base code?

hylke94 picture hylke94 on 17 Mar 2017

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
    });
shanehoban picture shanehoban on 26 Jun 2017
👍8

fixed in 97c450b

Dogfalo picture Dogfalo on 20 Jul 2017

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/

mrdnote picture mrdnote on 19 Oct 2017
👍2

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