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