Materialize: Not possible to use "required" validation with radio buttons in Chrome

[mitar]

For such ratio button(s):

          <div class="row">
              <div class="input-field col s12 center-align">
                <input type="radio" name="category" value="category1" id="point-category-category1" required />
                <label for="point-category-category1">Category 1</label>
              </div>
          </div>

I am getting in the Chrome the following error:

An invalid form control with name='category' is not focusable.

The reason is probably because Materialize hides the radio buttons away from the page and replace it with custom rendering.

[acburst]

Can you post more code or a demo? I'm not sure where exactly youre getting the error.

[mitar]

Here it is:

http://jsfiddle.net/pzxj2sy5/1/

Open in Chrome and click on "submit" button. You will get in the web console:

An invalid form control with name='category' is not focusable.

[charleshan]

I'm having the same issue.

[charleshan]

My workaround for now is adding the follow after the contact has been rendered.

$('input').css('visibility', 'visible');

[mitar]

But isn't the real radio inputs pushed outside of the visible page? And only labels are then left in their place? So focus to required radio button then would not really work correctly?

[seanodotcom]

+1 Having this problem too.
How do you display a message to the user when _required_ radio inputs are not filled?

[Voxran]

Sorry for the up, but I still have the same issue in 0.97.6... No error message on radio in Chrome or Blink-browsers :/

[ianarsenault]

+1 on this. In v.97.7 Chrome doesn't work. Firefox displays the required message, but its no where near the radio buttons.

[EdgarMP]

I still have this problem. Any suggestions?

[LGracia]

Hi guys.
I have the same issue, my solution is this(I hope it's not too late):

• Add 'name' attribute for everyone elements within 'div' with class 'input-field' .
• Add class 'validate' to the first radio-button within the 'div' with class 'input-field', it's not necessary for all elements.
• Use the javascript file.

https://jsbin.com/jeyaset/edit?html,js,output

[avinashdvv]

how to solve same issue in input box with collapsible

[LGracia]

check this out, let me know if this is the function that you want
https://jsbin.com/sojozoj/edit?html,js,output

[ghost]

Same problem here guys. Required radio buttons don't show the required message. The page just scrolls up to them.

Using Chrome 57.0.2987.133 (Official Build) (64-bit)

[LGracia]

Hi, try with this
https://jsbin.com/jeyaset/edit?html,js,output

[Dogfalo]

Fixed in 57423d86

[shehjart]

Hi guys, any idea how to solve the same problem for select also. I am running into exactly the same error message.

[richardalain83]

@shehjart if you use accordion and the input is in a closed pane of the accordion, you might get this error.