Anzeige nicht ausgefüllte Pflichtfelder bei weiter oft nicht eindeutig.

src/components/Ausweis/Ausweisart.svelte

@@ -186,6 +186,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			onlyUnique={true}
 			minlength={4}
 			maxlength={4}
+			required={true}
 			onFocusIn={() => {
 				addNotification({
 					message: "Info",
@@ -249,6 +250,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			minlength={4}
 			maxlength={4}
 			onlyUnique={true}
+			required={true}
 			onFocusIn={() => {
 				addNotification({
 					message: "Info",
@@ -287,6 +289,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			onlyUnique={true}
 			minlength={4}
 			maxlength={4}
+			required={true}
 			onFocusIn={() => {
 				addNotification({
 					message: "Info",

src/components/Ausweis/ButtonWeiterHilfe.svelte

@@ -44,11 +44,14 @@
 		// Wir holen uns die Daten aus dem Formular
 		const data = new FormData(form);
 		// Und gleichen diese mit allen Feldern ab die "required" sind, damit stellen wir sicher, dass alles richtig ausgefüllt wurde.
-		(form.querySelectorAll("select[name][required],input[name][required]") as NodeListOf<HTMLInputElement | HTMLSelectElement>).forEach((element) => {
+		console.log(form.querySelectorAll("select[name][required], input[name][required]"));
+		
+		(form.querySelectorAll("select[name][required], input[name][required]") as NodeListOf<HTMLInputElement | HTMLSelectElement>).forEach((element) => {
 			const value = data.get(element.getAttribute("name") as string)
 
 			if (!value && element.required) {
 				element.setCustomValidity("Eine Auswahl ist verpflichtend.")
+				element.dataset["isinvalid"] = "true"
 			} else {
 				element.setCustomValidity("")
 			}

src/components/TagInput.svelte

@@ -19,6 +19,7 @@
 	export let onFocusIn: () => any = () => {};
 	export let onFocusOut: () => any = () => {};
 	export let className: string = "";
+	export let required: boolean = false;
 
 	function addTag(tag: string) {
 		if ((onlyUnique && tags.indexOf(tag) > -1) || maxTags == tags.length) {
@@ -48,6 +49,8 @@
 			tag = ""
 		}
 	}
+
+	$: required = tags.length > 0 ? false : required;
 </script>
 
 <div
@@ -83,6 +86,7 @@
 		class="input input-bordered h-10 px-2 py-1.5 {className}"
 		{minlength}
 		{maxlength}
+		{required}
 		disabled={disable}
 		readonly={readonly}
 		autocomplete="off"

src/style/global.css

@@ -301,4 +301,9 @@ article {
     100% {
         transform: rotate(360deg);
     }
-    } 
+    } 
+
+/* FORM VALIDATION MESSAGE */
+[data-isinvalid="true"] {
+	border: 2px solid red !important;
+}