tfofurn
/
doomsday
forked from tools/doomsday
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve error and success state styling

This commit is contained in:
Florine W. Dekker 2020-01-25 17:30:26 +01:00
parent 6d44e7a1d5
commit b8de002541
Signed by untrusted user: FWDekker
GPG Key ID: B1B567AF58D6EE0F
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -22,16 +22,22 @@
display: none;
}
.success-message {
color: green;
}
.error-message {
color: red;
}
input[data-entered=true]:valid {
background-color: green;
border-color: green;
color: green;
}
input[data-entered=true]:invalid {
background-color: red;
border-color: red;
color: red;
}
</style>
</head>
@ -54,17 +60,23 @@
<!-- Input -->
<section class="container">
<form>
<label for="century-input" id="century-title-label">Century</label>
<input type="text" id="century-input" autocomplete="off" autofocus />
<span class="error-message invisible" id="century-error-label"></span>
<p>
<label for="century-input" id="century-title-label">Century</label>
<input type="text" id="century-input" autocomplete="off" autofocus />
<span class="error-message invisible" id="century-error-label"></span>
</p>
<label for="year-input" id="year-title-label">Year</label>
<input type="text" id="year-input" autocomplete="off" />
<span class="error-message invisible" id="year-error-label"></span>
<p>
<label for="year-input" id="year-title-label">Year</label>
<input type="text" id="year-input" autocomplete="off" />
<span class="error-message invisible" id="year-error-label"></span>
</p>
<label for="day-input" id="day-title-label">Day</label>
<input type="text" id="day-input" autocomplete="off" />
<span class="error-message invisible" id="day-error-label"></span>
<p>
<label for="day-input" id="day-title-label">Day</label>
<input type="text" id="day-input" autocomplete="off" />
<span class="error-message invisible" id="day-error-label"></span>
</p>
</form>
</section>
@ -106,7 +118,7 @@
case expected:
return null;
case undefined:
return "Unrecognized day of week";
return "Unrecognized day of week.";
default:
return "";
}
@ -139,7 +151,7 @@
const errorMessage = this.validate(this.input.value);
if (errorMessage === null) {
this.hideError();
this.showSuccess();
this.onValidInput();
} else {
this.showError(errorMessage);
@ -187,7 +199,9 @@
this.input.value = "";
this.input.dataset["entered"] = "false";
this.hideError();
this.showSuccess();
this.titleLabel.classList.remove("success-message");
this.updateTitle();
}
@ -199,6 +213,8 @@
showError(message) {
this.input.setCustomValidity(message || "Invalid");
this.titleLabel.classList.remove("success-message");
this.titleLabel.classList.add("error-message");
this.errorLabel.classList.remove("invisible");
this.errorLabel.innerText = message;
}
@ -206,9 +222,11 @@
/**
* Marks the input as valid and hides the error label.
*/
hideError() {
showSuccess() {
this.input.setCustomValidity("");
this.titleLabel.classList.remove("error-message");
this.titleLabel.classList.add("success-message");
this.errorLabel.classList.add("invisible");
this.errorLabel.innerText = "";
}