HTML5-Formularvalidierungsfehler bei ausgeblendeten Controls anz
Matti Mäkitalo
HTML5-Formularvalidierungsfehler bei ausgeblendeten Controls anz
Matti Mäkitalo
Matthias ApselHi,
ich habe ausgeblendete Formularfelder, welche aber als required gekennzeichnet sind.
Für die Validierung der Eingabedaten würde ich gerne die Meldung des Browsers, dass diese notwendig sind, anzeigen lassen, diese sind aber zusammen mit dem Control selber versteckt.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
[code lang=css]input[type='radio'] {
display: none;
}
input[type='radio']:checked ~ label {
background-color: grey;
}
</style>
</head>
<body>
<form action='' method='POST'>
<fieldset>
<ul>
<li>
<input type='radio' name='bla' required='required' value='1' id='item-1' title='Wähle eins aus'/ >
<label for='item-1'>Item 1</label>
</li>
<li>
<input type='radio' name='bla' required='required' value='2' id='item-2' title='Wähle eins aus'/ />
<label for='item-2'>Item 2</label>
</li>
</ul>
<button type='submit'>Tu es!</button>
</fieldset>
</form>
</body>
</html>[/code]
Gibt es einen Trick, das Meldungsfenster bzgl der Invalidität des Browsers einzublenden, obwohl das Control ausgeblendet ist?
Bis die Tage,
Matti
-
Om nah hoo pez nyeetz, Matti Mäkitalo!
Gibt es einen Trick, das Meldungsfenster bzgl der Invalidität des Browsers einzublenden, obwohl das Control ausgeblendet ist?
* visibility?
* opacity?Matthias
--
1/z ist kein Blatt Papier.
-
Hi,
Gibt es einen Trick, das Meldungsfenster bzgl der Invalidität des Browsers einzublenden, obwohl das Control ausgeblendet ist?
* visibility?
* opacity?entweder stehe ich auf dem Schlauch, oder es funktioniert nicht.
Wenn ich (stattdisplay: nonefür die Input-Radio-Elemente so visibility/opacity einstelle, dass diese nicht sichtbar sind, ist das Meldungsfenster(*) immer noch nicht zu sehen. Am Beispiel opacity sieht man, dass das Tooltip die Eigenschaft vom Control erbt.*: gemeinst ist das vom Browser. Im Falle vom Chrome bspw. ein kleines Tooltip mit einer Fehlermeldung, welche einen kleinen "Pfeil" hat, welcher auf das Control zeigt/zeigen würde.
Bis die Tage,
Matti
-
-
Hi,
mir fällt nur clip als Lösung ein.
input[type='radio'] { position: absolute; width: 1px; height: 18px; clip: rect(18px, 9999px, 9999px, 0); outline: 0; } /* Sonst im Chrome die Bubble so schmal, Firefox hat dieses Problem nicht */ ::-webkit-validation-bubble { width: 250px; } input[type='radio']:checked ~ label { background-color: grey; }~dave
-
Hi,
mir fällt nur clip als Lösung ein.
danke, das hat mir geholfen.
Bis die Tage,
Matti
-