Validate newsletter email before activation
This commit is contained in:
@@ -59,7 +59,7 @@
|
|||||||
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
|
<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>
|
<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">
|
<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>
|
||||||
<div class="sg-call-to-action-card__action">
|
<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>
|
<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>
|
||||||
|
|||||||
@@ -208,6 +208,7 @@
|
|||||||
type="email"
|
type="email"
|
||||||
placeholder="E-Mail-Adresse"
|
placeholder="E-Mail-Adresse"
|
||||||
aria-label="E-Mail-Adresse"
|
aria-label="E-Mail-Adresse"
|
||||||
|
required
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -235,7 +236,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const updateProcessButtonState = () => {
|
const updateProcessButtonState = () => {
|
||||||
const isActive = input.value.trim().length > 0;
|
const isActive = input.checkValidity();
|
||||||
processButton.disabled = !isActive;
|
processButton.disabled = !isActive;
|
||||||
processButton.setAttribute('aria-disabled', String(!isActive));
|
processButton.setAttribute('aria-disabled', String(!isActive));
|
||||||
processButton.setAttribute('data-component-state', isActive ? 'active' : 'inactive');
|
processButton.setAttribute('data-component-state', isActive ? 'active' : 'inactive');
|
||||||
|
|||||||
Reference in New Issue
Block a user