純粋なCSSを使用したフォーム入力の検証

Question

JavaScriptを使用せずにHTML要素のプロパティ（要素の属性に基づいていない）に基づいてCSSクラスを適用する方法はありますか？

例えば、入力要素の下に考える：

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

ユーザが上記要素と相互作用し、いくつかのテキストを入力すると、その「値」プロパティが更新されます。 「値」属性は空のままです。いずれにしても、CSS内の要素のプロパティにアクセスできますか？ JavaScriptを使って "value"属性を更新し、属性セレクタを使ってスタイルを更新することは可能です。 CSSセレクタだけを使ってこれを達成する方法はありますか？

明確にするために、私は入力が有効かどうかについて心配していません、私はただコンテンツの可用性をチェックしたい、そしてコンテンツが存在すれば "any-css-rule-1" "any-css-rule-2"

Answer 1

patternおよびrequiredの属性は、htmlに使用できます。 :valid,:invalidcssの疑似クラスを使用して、特定のユーザー入力に一致させます。

: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>