From 51fc9b87e02dd8176d065b4ca5e0c3a1453909a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 3 Aug 2026 16:55:29 +0200
Subject: [PATCH] Validate newsletter email before activation

---
 components/public-page-components.html | 2 +-
 patterns/public-page-patterns.html     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/public-page-components.html b/components/public-page-components.html
index 76cbca1..4a2fd02 100644
--- a/components/public-page-components.html
+++ b/components/public-page-components.html
@@ -59,7 +59,7 @@
           <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
             <p class="sg-body sg-call-to-action-card__text">Mit dem Newsletter immer über neue Inhalte informiert bleiben.</p>
             <div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
-              <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse">
+              <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" required>
             </div>
             <div class="sg-call-to-action-card__action">
               <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">Prozess Button</button>
diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index de9e143..8540207 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -208,6 +208,7 @@
                   type="email"
                   placeholder="E-Mail-Adresse"
                   aria-label="E-Mail-Adresse"
+                  required
                 >
               </div>
 
@@ -235,7 +236,7 @@
           }
 
           const updateProcessButtonState = () => {
-            const isActive = input.value.trim().length > 0;
+            const isActive = input.checkValidity();
             processButton.disabled = !isActive;
             processButton.setAttribute('aria-disabled', String(!isActive));
             processButton.setAttribute('data-component-state', isActive ? 'active' : 'inactive');