Juan
/
lab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[HTML][CSS] exemple de message d'erreur css pur pour input radio

Browse Source
master
Juan Massuelles 1 year ago
parent 698874e6d5
commit 5db2f923f2
5 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File

3
invalid-radio-message/README.md
Unescape View File

@ -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).

36
invalid-radio-message/index.html
Unescape View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="invalid-radio.css">
<title>Sample invalid check for radio slelction</title>
</head>
<body>
<h1>Sample invalid check for radio slelction</h1>
<form action="">
<div class="pj-notation"><fieldset class="stars" data-pjnotation="">
<legend class="screenreader">Attribuer une note entre 1 et 5</legend>
<input type="radio" id="depot_avis_noteGlobale_1" name="depot_avis[noteGlobale]" required="required" value="1"><input type="radio" id="depot_avis_noteGlobale_2" name="depot_avis[noteGlobale]" required="required" value="2"><input type="radio" id="depot_avis_noteGlobale_3" name="depot_avis[noteGlobale]" required="required" value="3"><input type="radio" id="depot_avis_noteGlobale_4" name="depot_avis[noteGlobale]" required="required" value="4"><input type="radio" id="depot_avis_noteGlobale_5" name="depot_avis[noteGlobale]" required="required" value="5"> <label class="icon-etoile invalid nullnote" for="depot_avis_noteGlobale_1">
<span class="screenreader">Note 1 sur 5</span>
</label>
<label class="icon-etoile invalid nullnote" for="depot_avis_noteGlobale_2">
<span class="screenreader">Note 2 sur 5</span>
</label>
<label class="icon-etoile invalid nullnote" for="depot_avis_noteGlobale_3">
<span class="screenreader">Note 3 sur 5</span>
</label>
<label class="icon-etoile invalid nullnote" for="depot_avis_noteGlobale_4">
<span class="screenreader">Note 4 sur 5</span>
</label>
<label class="icon-etoile invalid nullnote" for="depot_avis_noteGlobale_5">
<span class="screenreader">Note 5 sur 5</span>
</label>
<div class="pj-error">Merci de choisir une note</div>
</fieldset>
</div>
<button type="submit">Go!</button>
</form>
</body>
</html>

9
invalid-radio-message/invalid-radio.css
Unescape View File

@ -0,0 +1,9 @@
.pj-error {
display: none; }
input:invalid {
outline: solid red; }
input:invalid ~ .pj-error {
display: block; }
/*# sourceMappingURL=invalid-radio.css.map */

7
invalid-radio-message/invalid-radio.css.map
Unescape View File

@ -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"
}

11
invalid-radio-message/invalid-radio.scss
Unescape View File

@ -0,0 +1,11 @@
.pj-error {
display:none;
}
input:invalid {
outline: solid red;
~ .pj-error {
display:block;
}
}
Write Preview
Loading…
Cancel
Save