fix(forms): unsichtbare Unicode-Zeichen in Eingaben strippen + FormCard-Rahmen
- cleanText(): Zero-Width-/Bidi-Marks/BOM (Copy-Paste aus iOS/WhatsApp) vor Validierung und im Payload entfernen — Telefonnummern mit U+202D/U+202C fielen sonst durch die Validierung - FormCard.svelte: gerahmter Container, umschließt Kontakt- und Mitmachen-Formular Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import type { InternalComponentBlockData } from "$lib/block-types";
|
||||
import ContactFormComponent from "$lib/components/internal/ContactFormComponent.svelte";
|
||||
import MitmachenFormComponent from "$lib/components/internal/MitmachenFormComponent.svelte";
|
||||
import FormCard from "$lib/components/internal/FormCard.svelte";
|
||||
|
||||
let { block }: { block: InternalComponentBlockData } = $props();
|
||||
|
||||
@@ -12,9 +13,13 @@
|
||||
|
||||
<div class={layoutClasses} data-block="InternalComponent" data-block-type="internal_component" data-block-slug={block._slug}>
|
||||
{#if component === "form-contact"}
|
||||
<ContactFormComponent />
|
||||
<FormCard>
|
||||
<ContactFormComponent />
|
||||
</FormCard>
|
||||
{:else if component === "form-mitmachen"}
|
||||
<MitmachenFormComponent />
|
||||
<FormCard>
|
||||
<MitmachenFormComponent />
|
||||
</FormCard>
|
||||
{:else}
|
||||
<p class="text-sm text-stein-500">Unbekannte interne Komponente: <code>{component}</code></p>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
/** Gerahmter Container für interne Formulare (Kontakt, Mitmachen).
|
||||
* Optionaler Titel/Untertitel als Kopfzeile. */
|
||||
let {
|
||||
title = "",
|
||||
subtitle = "",
|
||||
children,
|
||||
}: {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
children: Snippet;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-stein-200 bg-white p-5 shadow-sm md:p-7">
|
||||
{#if title}
|
||||
<div class="mb-4 border-b border-stein-200 pb-3">
|
||||
<h2 class="text-base font-semibold text-stein-800">{title}</h2>
|
||||
{#if subtitle}
|
||||
<p class="mt-0.5 text-sm text-stein-500">{subtitle}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{@render children()}
|
||||
</div>
|
||||
@@ -52,8 +52,18 @@ const URL_RE = /\b(?:https?:\/\/|www\.)\S+/gi;
|
||||
const CONTROL_CHAR_RE = /[\x00-\x08\x0B\x0C\x0E-\x1F]/;
|
||||
const PHONE_RE = /^[0-9+()/\-.\s]*$/;
|
||||
|
||||
/** Unsichtbare Format-Zeichen: Zero-Width, Bidi-Marks (U+202A–E), Word-Joiner,
|
||||
* BOM. Landen beim Kopieren aus iOS-Kontakten/WhatsApp in Telefonnummern und
|
||||
* lassen sonst die Validierung durchfallen. */
|
||||
const INVISIBLE_RE = /[\u200B-\u200F\u202A-\u202E\u2060-\u206F\uFEFF]/g;
|
||||
|
||||
/** Entfernt unsichtbare Format-Zeichen + trimmt. Für Validierung UND Payload. */
|
||||
export function cleanText(s: unknown): string {
|
||||
return typeof s === "string" ? s.replace(INVISIBLE_RE, "").trim() : "";
|
||||
}
|
||||
|
||||
function trim(s: unknown): string {
|
||||
return typeof s === "string" ? s.trim() : "";
|
||||
return cleanText(s);
|
||||
}
|
||||
|
||||
export function validateMitmachen(input: Partial<MitmachenFields>): MitmachenErrors {
|
||||
|
||||
Reference in New Issue
Block a user