Validierungen von Formulareingaben mit reinem CSS

Question

Gibt es eine Möglichkeit, CSS-Klassen basierend auf der Eigenschaft des HTML-Elements (nicht basierend auf dem Attribut des Elements) anzuwenden, ohne JavaScript zu verwenden?

Betrachten wir zum Beispiel unterhalb Eingabeelement:

<input type="text" id="txtName" class="form-field__input" name="txtName" value=""> 

Wenn der Benutzer interagiert mit obige Element und tritt in einen Text, dessen Eigenschaft „Wert“ aktualisiert wird; Das Attribut "Wert" bleibt jedoch leer. Können wir auf die Eigenschaft des Elements innerhalb von CSS zugreifen? Ich weiß, dass es möglich ist, das Attribut "Wert" mithilfe von JavaScript zu aktualisieren, und dann mithilfe von Attributselektoren die Stile zu aktualisieren. Aber gibt es eine Möglichkeit, dies nur mit CSS-Selektoren zu erreichen?

Um zu klären, ich bin nicht besorgt darüber, ob die Eingabe gültig ist oder nicht, ich möchte nur die Verfügbarkeit von Inhalten überprüfen, und wenn der Inhalt vorhanden ist, sollte "any-css-rule-1" angewendet werden, andernfalls "any-css-Regel-2".

Answer 1

Sie können pattern und required Attribute unter html; :valid, :invalid Pseudoklassen bei css, um bestimmte Benutzereingaben zu entsprechen.

:valid + [for="txtName"]:after { 
 
    content: "valid input"; 
 
    color: green; 
 
} 
 

 
:invalid + [for="txtName"]:after { 
 
    content: "invalid input"; 
 
    color: red; 
 
}

<!-- match exact user input "abc" --> 
 
<input type="text" 
 
     id="txtName" 
 
     class="form-field__input" 
 
     name="txtName" 
 
     value="" 
 
     pattern="abc" 
 
     required /> 
 
<label for="txtName"></label>