Hinweis auf ungültige Daten in input mit type number

[Robert B.]

Hallo Forum,

ich überlege gerade, ob es nur mit CSS möglich ist, eine (möglichst) sprechende Fehlermeldung an ein input type number zu hängen, falls ungültige Daten eingegeben worden sind.

Das input ist wie folgt definiert und eingebettet:

<form>
	<fieldset><legend>Enabled/Disabled</legend>
		<p><label>Es sind <input name="nDays" id="nDays" type="number" min="1" step="1" pattern="^[0-9]+$"/> Tage.</label></p>
	</fieldset>
</form>

Zumindest einen visuellen Hinweis bekommt man mit etwas CSS:

:invalid { border: 2px dotted red; }

Wenn ich ins Input etwas Ungültiges eingebe, sind das input, das fieldset und das form jeweils rot-gepunktet umrandet. Jetzt wäre noch ein Hinweistext schön. Da ich an input keinen generierten Inhalt anhängen kann, fand ich per Suche den „Tipp“ das Label anders zu platzieren und den Nachfahren-Selektor zu verwenden:

<p><label for="nDays">Es sind</label> <input name="nDays" id="nDays" type="number" min="1" step="1" pattern="^[0-9]+$"/> <label for="nDays">Tage.</label></p>

:invalid + label:after {
	padding-left: 1em;
	content: 'Not a valid number.';
	color: red;
}

An die Attribute des Input komme ich so aber nicht heran. Gibt es eine CSS-Möglichkeit so etwas in der Art wie

input[type="number"]:invalid:after {
	padding-left: 1em;
	content: 'Number has to be > 'attr(min);
	color: red;
}

nur mit CSS umzusetzen oder brauche ich dafür noch JavaScript-Mithilfe?

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

sieht schlecht aus. CSS Values 2 erlaubt nur den Zugriff auf's gleiche Element, und CSS Values Level 3 immerhin „If used on a pseudo-element, it returns the value of the attribute on the pseudo-element’s originating element.“

Rolf

[Gunnar Bittersmann]

@@Robert B.

		<p><label>Es sind <input name="nDays" id="nDays" type="number" min="1" step="1" pattern="^[0-9]+$"/> Tage.</label></p>

Das HTML ist fehlerhaft.

“4.10.5.1.12. Number state (type=number)
… The following content attributes must not be specified and do not apply to the element: …, pattern, …” [Spec]

LLAP 🖖

[Robert B.]

Hallo @Gunnar Bittersmann,

da bin ich über mein eigenes „Cargo-Kult-Programming“ gestolpert. Ich hatte irgendwie im Hinterkopf, dass manche Browser trotz <input type="number"/> Buchstaben zulassen, was man aber mit einem pattern verhindern könne. Gerade ausprobiert: Entweder wird schon number entsprechend umgesetzt, oder trotz <input type="number"/> und pattern="^[0-9]+$" lassen sich auch Buchstaben eingeben.

Vielen Dank für deinen Hinweis!

Viele Grüße
Robert