回答編集履歴
1
追記
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
PHPもJavaScriptも使えないようでしたら、真面目な認証システムにすることは不可能なので、
|
|
2
2
|
とても需要の少ない要件かと思うのですが、一応調べてみました。
|
|
3
|
-
|
|
3
|
+
HTML5の`pattern`属性と、CSS4の疑似クラス`:valid`を使用すれば、対応ブラウザでは仰ることは可能のようです。
|
|
4
|
-
（主要ブラウザでも非対応のものがあるよう
|
|
4
|
+
（調べた記事によると主要ブラウザでも非対応のものがあるようでしたが、、気になるようでしたら調査・検証してみてください。）
|
|
5
5
|
`:valid`を使うにはinputタグに`required`属性も指定しないと想定した動作にならないので、これも使います。
|
|
6
6
|
|
|
7
7
|
```HTML
|
|
@@ -14,4 +14,10 @@
|
|
|
14
14
|
#test:valid ~ .text{
|
|
15
15
|
visibility:hidden;
|
|
16
16
|
}
|
|
17
|
-
```
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
`pattern`属性は本来正規表現を用いることを想定している属性のようなので、
|
|
20
|
+
もちろん正規表現も使えますが、今回の質問内容の限りでは気にしなくていいです。
|
|
21
|
+
|
|
22
|
+
また、提示いただいてるコード（特定条件で非表示）と、質問文の内容（特定条件で表示）が矛盾してるのですが、
|
|
23
|
+
`:valid`と対になるように、patternに合致しない状態を指定する擬似クラス`:invalid`もあるようなので、状況に応じて適宜使ってください。
|