Required for html input with label

Question

i use label + hidden input.file for customize CSS style.

But when i add a required attribute , it does not work.

In console log: An invalid form control with name='imageFile' is not focusable..

Is there anyway to fix this without JavaScript ?

<div>
  <label for="imageFile" class="button">Image</label>
  <input type="file" required id="imageFile" name="imageFile" style="display:none" />
</div>

make it in absolute position and off the screen, :possible style `position:absolute;right:100vw` — G-Cyrillus, Jul 21 '20 at 15:32
https://stackoverflow.com/questions/42304472/an-invalid-form-control-with-name-is-not-focusable — G-Man, Jul 21 '20 at 15:32
How do you expect a user to fill out this input field if they can't even see it? — Carsten Massmann, Jul 21 '20 at 15:32
@cars10m clicking on the label should focus the input and let you choose a file. — G-Cyrillus, Jul 21 '20 at 15:34
Does this answer your question? [An invalid form control with name...is not focusable](https://stackoverflow.com/questions/42304472/an-invalid-form-control-with-name-is-not-focusable) — D. Pardal, Jul 21 '20 at 15:34
@D.Pardal probably, but the request is without javascript ;) — G-Cyrillus, Jul 21 '20 at 15:36
I just tried it out (without "required" attribute): yes you *can* put the focus on the invisible input dialogue, but you cannot see, if and when any files were actually picked. — Carsten Massmann, Jul 21 '20 at 15:43
@cars10m its html5 , click on link label generate click on input . G-Cyrillus idea with out of screen good , but required warning out of screen to :( — padavan, Jul 21 '20 at 15:44
@G-Cyrillus hm intresting 'hack' make opacity 0 and position absolute under label — padavan, Jul 21 '20 at 15:50

score 0 · Answer 1 · answered Jul 21 '20 at 15:31

0

Remove required because the display is none. The user can't modify the value of the input if it not displayed, so why it will be required.

answered Jul 21 '20 at 15:31

gabida

170
7

score 0 · Accepted Answer · answered Jul 21 '20 at 17:17

0

I found 'hack' solution , thx @G-Cyrillus.

[type='file'] {
    opacity: 0;
    position: absolute;
    width: 0;
    left: 0;
}

Required alert work fine.

answered Jul 21 '20 at 17:17

padavan

714
8
22

Required for html input with label

2 Answers2