HTML5: Wie verwendet man das Attribut "erforderlich" mit einem Optionsfeld mit Bild?

Question

Angenommen, ich habe einige Optionen für einen Benutzer. Der Benutzer kann nur eine Option auswählen, daher die Verwendung von Optionsfeldern. Anstatt langweilige Optionsfelder für den Benutzer anzuzeigen, werden Bilder angezeigt und nach dem Klicken auf ein Optionsfeld ausgewählt.

Die Optionsfelder sind ausgeblendet und das verursacht das Problem mit dem required Attribut.

Da die Optionsschaltflächen ausgeblendet sind, wird das erforderliche Attribut für einen Moment angezeigt und dann ausgeblendet. Wenn ich die Radiobuttons sichtbar mache, funktioniert alles wie gewünscht.

Hier ist mein Markup:

<div class="form-group travelmodes"> 
    <label for="car" style="border: 1px solid; background-image: url(/transportation-icons-06.png?width=200&amp;crop=0,0,200,200);"> 
     <span>Car</span> 
     <input id="car" name="TravelMode" required type="radio" value="af60da7e-e0f6-438f-b633-a64e00b9a720"> 
    </label> 
    <label for="aeroplane" style="border: 1px solid; background-image: url(/transportation-icons-09.png?width=200&amp;crop=0,0,200,200);"> 
     <span>Aeroplane</span> 
     <input id="aeroplane" name="TravelMode" required type="radio" value="5fb4cb1e-6de2-4eb4-acf6-a64e00b9a721"> 
    </label> 
</div> 

Wenn die oben nicht klar, benutzen Sie bitte diese JSBin sehen: Demo

Wie kann ich dieses Problem beheben, so dass ich Bilder machen können, anstatt sichtbar Radio Schaltflächen, und verwenden Sie immer noch das erforderliche Attribut?

Answer 1

Einstellung display: none bewirkt, dass das Popup "erforderlich" ausgeblendet wird.

Stattdessen könnten Sie absolute Positionierung mit einem winzigen Zoom versuchen:

#invisible input[type="radio"] { 
    position: absolute; 
    zoom: 0.1; 
} 

JSBin