forked from tools/doomsday
Improve error and success state styling
This commit is contained in:
parent
6d44e7a1d5
commit
b8de002541
30
index.html
30
index.html
|
@ -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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 = "";
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue