From 5db2f923f21542b3b45dc4aed3df4c794e39eb77 Mon Sep 17 00:00:00 2001 From: Juan Massuelles Date: Wed, 30 Aug 2023 10:45:40 +0200 Subject: [PATCH] [HTML][CSS] exemple de message d'erreur css pur pour input radio --- invalid-radio-message/README.md | 3 +++ invalid-radio-message/index.html | 36 +++++++++++++++++++++++++++++ invalid-radio-message/invalid-radio.css | 9 ++++++++ invalid-radio-message/invalid-radio.css.map | 7 ++++++ invalid-radio-message/invalid-radio.scss | 11 +++++++++ 5 files changed, 66 insertions(+) create mode 100644 invalid-radio-message/README.md create mode 100644 invalid-radio-message/index.html create mode 100644 invalid-radio-message/invalid-radio.css create mode 100644 invalid-radio-message/invalid-radio.css.map create mode 100644 invalid-radio-message/invalid-radio.scss diff --git a/invalid-radio-message/README.md b/invalid-radio-message/README.md new file mode 100644 index 0000000..139620e --- /dev/null +++ b/invalid-radio-message/README.md @@ -0,0 +1,3 @@ +# Test d'invalidité pour choix radio + +test permettant de valider l'affichage d'un message d'erreur, css uniquement, si une selection par radio est invalide (sur un required). diff --git a/invalid-radio-message/index.html b/invalid-radio-message/index.html new file mode 100644 index 0000000..4661db3 --- /dev/null +++ b/invalid-radio-message/index.html @@ -0,0 +1,36 @@ + + + + + + + + Sample invalid check for radio slelction + + +

Sample invalid check for radio slelction

+
+
+ Attribuer une note entre 1 et 5 + + + + + +
Merci de choisir une note
+
+
+ +
+ + diff --git a/invalid-radio-message/invalid-radio.css b/invalid-radio-message/invalid-radio.css new file mode 100644 index 0000000..21ab17b --- /dev/null +++ b/invalid-radio-message/invalid-radio.css @@ -0,0 +1,9 @@ +.pj-error { + display: none; } + +input:invalid { + outline: solid red; } + input:invalid ~ .pj-error { + display: block; } + +/*# sourceMappingURL=invalid-radio.css.map */ diff --git a/invalid-radio-message/invalid-radio.css.map b/invalid-radio-message/invalid-radio.css.map new file mode 100644 index 0000000..48da41f --- /dev/null +++ b/invalid-radio-message/invalid-radio.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,SAAU;EACR,OAAO,EAAC,IAAI;;AAId,aAAc;EACZ,OAAO,EAAE,SAAS;EAClB,yBAAY;IACV,OAAO,EAAC,KAAK", +"sources": ["invalid-radio.scss"], +"names": [], +"file": "invalid-radio.css" +} \ No newline at end of file diff --git a/invalid-radio-message/invalid-radio.scss b/invalid-radio-message/invalid-radio.scss new file mode 100644 index 0000000..0b5a8dd --- /dev/null +++ b/invalid-radio-message/invalid-radio.scss @@ -0,0 +1,11 @@ +.pj-error { + display:none; +} + + +input:invalid { + outline: solid red; + ~ .pj-error { + display:block; + } +} \ No newline at end of file