feat(ui): show errors for client-side validation

Thank you, @a0eoc, for the help. Fix #243 Fix #273
userstyles-world · Oct 15, 2023 · 0c0f4fc · 0c0f4fc
1 parent 577ceae
commit 0c0f4fc
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 17 deletions.
diff --git a/web/typescript/page/edit.ts b/web/typescript/page/edit.ts
@@ -1,10 +1,21 @@
 export function checkMaxLength() {
     type input = HTMLTextAreaElement | HTMLInputElement;
+    type error = HTMLParagraphElement;
 
     const validate = (el: input, max: number) => {
-        el.setCustomValidity(el.value.length > max
-            ? `Your input must be up to ${max} characters.`
-            : '');
+        const curr = el.value.length;
+        if (curr > max) {
+            el.setCustomValidity(`Your input must be up to ${max} characters.`);
+            message(el, `Input is too long. Characters used: ${curr}/${max}`);
+        } else {
+            el.setCustomValidity('');
+            message(el, '');
+        }
+    }
+
+    const message = (el: input, msg: string) => {
+        const e = document.querySelector(`.danger.${el.name}`) as error;
+        if (e) e.innerText = msg;
     }
 
     [...document.querySelectorAll('[maxlength]')].forEach((el: input) => {

diff --git a/web/views/review/create.tmpl b/web/views/review/create.tmpl
@@ -30,6 +30,9 @@
 			style="min-height: 120px"
 			aria-describedby="comment-hint"
 		>{{ .Review.Comment }}</textarea>
+		<p class="danger comment" role="alert" style="margin-top: -1rem">
+			{{ with .Error }}{{ . }}{{ end }}
+		</p>
 
 		<div class="mt:m">
 			<button class="btn primary mr:s" type="submit">Confirm</button>

diff --git a/web/views/style/add.tmpl b/web/views/style/add.tmpl
@@ -29,8 +29,10 @@
 		required maxlength="50"
 		type="text" name="name" id="name" value="{{ .Style.Name }}"
 		placeholder="e.g. UserStyles.world tweaks">
-	{{ with .err.Name }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
-	{{ with .dupName }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger name" role="alert">
+		{{ with .err.Name }}{{ . }}{{ end }}
+	</p>
+	{{ with .dupName }}<p class="danger name" role="alert">{{ . }}</p>{{ end }}
 
 	<label for="description">Description</label>
 	<i class="fg:3" id="description-hint">Short description of what your userstyle does in plain text. Will be used for SEO and rich embeds.</i>
@@ -40,7 +42,9 @@
 		aria-describedby="description-hint"
 		placeholder="e.g. UI experiments for UserStyles.world."
 	>{{ .Style.Description }}</textarea>
-	{{ with .err.Description }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger description" role="alert">
+		{{ with .err.Description }}{{ . }}{{ end }}
+	</p>
 
 	<label for="notes">Notes</label>
 	<i class="fg:3" id="notes-hint">Features, requirements, instructions, links, changelog, etc. Supports {{ template "partials/markdown" . }} syntax.</i>
@@ -50,7 +54,9 @@
 		aria-describedby="notes-hint"
 		placeholder="e.g. Please raise issues in the GitHub repository."
 	>{{ .Style.Notes }}</textarea>
-	{{ with .err.Notes }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger notes" role="alert">
+		{{ with .err.Notes }}{{ . }}{{ end }}
+	</p>
 
 	<label for="homepage">Homepage</label>
 	<i class="fg:3" id="homepage-hint">Link to userstyle's homepage, bug tracker, etc.</i>
@@ -93,7 +99,9 @@
 		aria-describedby="category-hint"
 		value="{{ .Style.Category }}"
 		placeholder="e.g. test.userstyles.world -> userstyles">
-	{{ with .err.Category }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger category" role="alert">
+		{{ with .err.Category }}{{ . }}{{ end }}
+	</p>
 
 	<label for="code">Source code</label>
 	<textarea

diff --git a/web/views/style/edit.tmpl b/web/views/style/edit.tmpl
@@ -24,7 +24,9 @@
 		required maxlength="50"
 		type="text" name="name" id="name" value="{{ .Style.Name }}"
 		placeholder="e.g. UserStyles.world tweaks">
-	{{ with .err.Name }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger name" role="alert">
+		{{ with .err.Name }}{{ . }}{{ end }}
+	</p>
 	{{ with .dupName }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
 
 	<label for="description">Description</label>
@@ -35,7 +37,9 @@
 		aria-describedby="description-hint"
 		placeholder="e.g. UI experiments for UserStyles.world."
 	>{{ .Style.Description }}</textarea>
-	{{ with .err.Description }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger description" role="alert">
+		{{ with .err.Description }}{{ . }}{{ end }}
+	</p>
 
 	<label for="notes">Notes</label>
 	<i class="fg:3" id="notes-hint">Features, requirements, instructions, links, changelog, etc. Supports {{ template "partials/markdown" . }} syntax.</i>
@@ -45,7 +49,9 @@
 		aria-describedby="notes-hint"
 		placeholder="e.g. Please raise issues in the GitHub repository."
 	>{{ .Style.Notes }}</textarea>
-	{{ with .err.Notes }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger notes" role="alert">
+		{{ with .err.Notes }}{{ . }}{{ end }}
+	</p>
 
 	<label for="homepage">Homepage</label>
 	<i class="fg:3" id="homepage-hint">Link to userstyle's homepage, bug tracker, etc.</i>
@@ -113,7 +119,9 @@
 		aria-describedby="category-hint"
 		value="{{ .Style.Category }}"
 		placeholder="e.g. test.userstyles.world -> userstyles">
-	{{ with .err.Category }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+	<p class="danger category" role="alert">
+		{{ with .err.Category }}{{ . }}{{ end }}
+	</p>
 
 	<label for="code">Source code</label>
 	<textarea

diff --git a/web/views/style/import.tmpl b/web/views/style/import.tmpl
@@ -25,7 +25,9 @@
 			required maxlength="50"
 			type="text" name="name" id="name" value="{{ .Style.Name }}"
 			placeholder="e.g. UserStyles.world tweaks">
-		{{ with .err.Name }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+		<p class="danger name" role="alert">
+			{{ with .err.Name }}{{ . }}{{ end }}
+		</p>
 		{{ with .dupName }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
 
 		<label for="description">Description</label>
@@ -36,7 +38,9 @@
 			aria-describedby="description-hint"
 			placeholder="e.g. UI experiments for UserStyles.world."
 		>{{ .Style.Description }}</textarea>
-		{{ with .err.Description }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+		<p class="danger description" role="alert">
+			{{ with .err.Description }}{{ . }}{{ end }}
+		</p>
 
 		<label for="notes">Notes</label>
 		<i class="fg:3" id="notes-hint">Features, requirements, instructions, links, changelog, etc. Supports {{ template "partials/markdown" . }} syntax.</i>
@@ -46,7 +50,9 @@
 			aria-describedby="notes-hint"
 			placeholder="e.g. Please raise issues in the GitHub repository."
 		>{{ .Style.Notes }}</textarea>
-		{{ with .err.Notes }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+		<p class="danger notes" role="alert">
+			{{ with .err.Notes }}{{ . }}{{ end }}
+		</p>
 
 		<label for="homepage">Homepage</label>
 		<i class="fg:3" id="homepage-hint">Link to userstyle's homepage, bug tracker, etc.</i>
@@ -89,7 +95,9 @@
 			aria-describedby="category-hint"
 			value="{{ .Style.Category }}"
 			placeholder="e.g. test.userstyles.world -> userstyles">
-		{{ with .err.Category }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+		<p class="danger category" role="alert">
+			{{ with .err.Category }}{{ . }}{{ end }}
+		</p>
 
 		<label for="code">Source code</label>
 		<textarea

diff --git a/web/views/user/account.tmpl b/web/views/user/account.tmpl
@@ -146,7 +146,9 @@
 			aria-describedby="biography-hint">
 			{{- .Params.Biography -}}
 		</textarea>
-		{{ with .errBio }}<p class="danger" role="alert">{{ . }}</p>{{ end }}
+		<p class="danger biography" role="alert">
+			{{ with .errBio }}{{ . }}{{ end }}
+		</p>
 		<div class="Form-control">
 			<button
 				type="submit"