Formular-System: zentrale form-field-Komponente, Inline-Feldfehler (aria-describedby, :user-invalid), Fokus-Ringe, Select-Chevron, Pflichtfeld-Kennzeichnung
Enthält auch User-WIP: Banner-Styles + zentriertes Kontakt-Layout in components.css Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@ declare(strict_types=1);
|
||||
/**
|
||||
* Kontaktformular (Felder wie auf der alten Seite). Props:
|
||||
* $intro array{title, text}
|
||||
* Felder rendern ausschließlich über component('form-field') — siehe CLAUDE.md.
|
||||
* Liest Flash-Status aus Query-Params (?sent=1 / ?error=...) — PRG-Muster.
|
||||
* Spam-Schutz: Honeypot "website" + signierter Timestamp "ft" (form_token()).
|
||||
*/
|
||||
@@ -18,6 +19,20 @@ $errorMessages = [
|
||||
'validation' => 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
|
||||
'mail' => 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
|
||||
];
|
||||
|
||||
$f = [
|
||||
'name' => ['type' => 'text', 'name' => 'name', 'id' => 'contact-name', 'label' => 'Name', 'required' => true, 'autocomplete' => 'name', 'maxlength' => 200],
|
||||
'email' => ['type' => 'email', 'name' => 'email', 'id' => 'contact-email', 'label' => 'E-Mail', 'required' => true, 'autocomplete' => 'email', 'maxlength' => 200],
|
||||
'phone' => ['type' => 'tel', 'name' => 'phone', 'id' => 'contact-phone', 'label' => 'Telefonnummer', 'autocomplete' => 'tel', 'maxlength' => 50],
|
||||
'interest' => ['type' => 'select', 'name' => 'interest', 'id' => 'contact-interest', 'label' => 'Ich interessiere mich für', 'options' => $interests],
|
||||
'subject' => ['type' => 'text', 'name' => 'subject', 'id' => 'contact-subject', 'label' => 'Betreff', 'required' => true, 'maxlength' => 200],
|
||||
'message' => ['type' => 'textarea', 'name' => 'message', 'id' => 'contact-message', 'label' => 'Nachricht', 'required' => true, 'maxlength' => 5000, 'rows' => 6],
|
||||
'privacy' => [
|
||||
'type' => 'checkbox', 'name' => 'privacy', 'id' => 'contact-privacy', 'required' => true,
|
||||
'label' => 'Ich stimme den Datenschutzbestimmungen zu.',
|
||||
'label_html' => 'Ich stimme den <a href="' . e(url('datenschutz')) . '">Datenschutzbestimmungen</a> zu.',
|
||||
],
|
||||
];
|
||||
?>
|
||||
<section class="section contact" id="kontakt">
|
||||
<div class="container contact__inner">
|
||||
@@ -27,7 +42,7 @@ $errorMessages = [
|
||||
<p class="text-muted">Oder direkt per Mail an <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a></p>
|
||||
</div>
|
||||
<form class="form" method="post" action="<?= e(url('kontakt-senden')) ?>" novalidate>
|
||||
<div class="form__status" role="status" aria-live="polite" data-form-status>
|
||||
<div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status>
|
||||
<?php if ($sent): ?>
|
||||
<p class="form__success">Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.</p>
|
||||
<?php elseif ($error !== null): ?>
|
||||
@@ -35,47 +50,21 @@ $errorMessages = [
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
|
||||
|
||||
<div class="form__row">
|
||||
<div class="form__field">
|
||||
<label for="contact-name">Name *</label>
|
||||
<input type="text" id="contact-name" name="name" required autocomplete="name" maxlength="200">
|
||||
</div>
|
||||
<div class="form__field">
|
||||
<label for="contact-email">E-Mail *</label>
|
||||
<input type="email" id="contact-email" name="email" required autocomplete="email" maxlength="200">
|
||||
</div>
|
||||
<?php component('form-field', ['field' => $f['name']]); ?>
|
||||
<?php component('form-field', ['field' => $f['email']]); ?>
|
||||
</div>
|
||||
|
||||
<div class="form__row">
|
||||
<div class="form__field">
|
||||
<label for="contact-phone">Telefonnummer</label>
|
||||
<input type="tel" id="contact-phone" name="phone" autocomplete="tel" maxlength="50">
|
||||
</div>
|
||||
<div class="form__field">
|
||||
<label for="contact-interest">Ich interessiere mich für</label>
|
||||
<select id="contact-interest" name="interest">
|
||||
<option value="">Bitte wählen</option>
|
||||
<?php foreach ($interests as $interest): ?>
|
||||
<option value="<?= e($interest) ?>"><?= e($interest) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<?php component('form-field', ['field' => $f['phone']]); ?>
|
||||
<?php component('form-field', ['field' => $f['interest']]); ?>
|
||||
</div>
|
||||
|
||||
<div class="form__field">
|
||||
<label for="contact-subject">Betreff *</label>
|
||||
<input type="text" id="contact-subject" name="subject" required maxlength="200">
|
||||
</div>
|
||||
|
||||
<div class="form__field">
|
||||
<label for="contact-message">Nachricht *</label>
|
||||
<textarea id="contact-message" name="message" rows="6" required maxlength="5000"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form__field form__field--checkbox">
|
||||
<input type="checkbox" id="contact-privacy" name="privacy" value="1" required>
|
||||
<label for="contact-privacy">Ich stimme den <a href="<?= e(url('datenschutz')) ?>">Datenschutzbestimmungen</a> zu. *</label>
|
||||
</div>
|
||||
<?php component('form-field', ['field' => $f['subject']]); ?>
|
||||
<?php component('form-field', ['field' => $f['message']]); ?>
|
||||
<?php component('form-field', ['field' => $f['privacy']]); ?>
|
||||
|
||||
<?php /* Honeypot — für Menschen unsichtbar, Bots füllen es aus */ ?>
|
||||
<div class="visually-hidden" aria-hidden="true">
|
||||
|
||||
66
app/components/form-field.php
Normal file
66
app/components/form-field.php
Normal file
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Einheitliches Formularfeld — EINZIGE Quelle für Feld-Markup aller Formulare.
|
||||
*
|
||||
* Props: $field (array):
|
||||
* type text | email | tel | select | textarea | checkbox (Default: text)
|
||||
* name, label Pflicht
|
||||
* id Default: field-<name>
|
||||
* required bool
|
||||
* autocomplete, maxlength, rows (textarea)
|
||||
* options[] + placeholder (select)
|
||||
* hint optionaler Hilfetext (aria-describedby)
|
||||
* label_html NUR für vertrauenswürdiges Markup aus Komponenten-Code
|
||||
* (z. B. Datenschutz-Link im Checkbox-Label) — nie Nutzereingaben!
|
||||
*
|
||||
* Jedes Feld bekommt ein leeres Fehler-Element (#<id>-error), das form.js bei
|
||||
* ungültiger Eingabe mit der Browser-Validierungsmeldung füllt (aria-describedby).
|
||||
*/
|
||||
$type = $field['type'] ?? 'text';
|
||||
$name = $field['name'];
|
||||
$id = $field['id'] ?? 'field-' . $name;
|
||||
$required = !empty($field['required']);
|
||||
$errorId = $id . '-error';
|
||||
$hintId = $id . '-hint';
|
||||
$describedBy = (!empty($field['hint']) ? $hintId . ' ' : '') . $errorId;
|
||||
|
||||
$requiredMark = $required
|
||||
? ' <span class="form__required" aria-hidden="true">*</span>'
|
||||
: '';
|
||||
|
||||
$commonAttrs = 'name="' . e($name) . '" id="' . e($id) . '"'
|
||||
. ($required ? ' required' : '')
|
||||
. ' aria-describedby="' . e($describedBy) . '"'
|
||||
. (!empty($field['autocomplete']) ? ' autocomplete="' . e($field['autocomplete']) . '"' : '')
|
||||
. (!empty($field['maxlength']) ? ' maxlength="' . e($field['maxlength']) . '"' : '');
|
||||
?>
|
||||
<?php if ($type === 'checkbox'): ?>
|
||||
<div class="form__field form__field--checkbox">
|
||||
<input type="checkbox" <?= $commonAttrs ?> value="1">
|
||||
<label for="<?= e($id) ?>"><?= $field['label_html'] ?? e($field['label']) ?><?= $requiredMark ?></label>
|
||||
<p class="form__error-msg" id="<?= e($errorId) ?>" hidden></p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="form__field">
|
||||
<label for="<?= e($id) ?>"><?= e($field['label']) ?><?= $requiredMark ?></label>
|
||||
<?php if ($type === 'select'): ?>
|
||||
<select <?= $commonAttrs ?>>
|
||||
<option value=""><?= e($field['placeholder'] ?? 'Bitte wählen') ?></option>
|
||||
<?php foreach ($field['options'] as $option): ?>
|
||||
<option value="<?= e($option) ?>"><?= e($option) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<?php elseif ($type === 'textarea'): ?>
|
||||
<textarea <?= $commonAttrs ?> rows="<?= e($field['rows'] ?? 6) ?>"></textarea>
|
||||
<?php else: ?>
|
||||
<input type="<?= e($type) ?>" <?= $commonAttrs ?>>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($field['hint'])): ?>
|
||||
<p class="form__hint" id="<?= e($hintId) ?>"><?= e($field['hint']) ?></p>
|
||||
<?php endif; ?>
|
||||
<p class="form__error-msg" id="<?= e($errorId) ?>" hidden></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
@@ -334,6 +334,44 @@
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--clr-text);
|
||||
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.form__field input:hover,
|
||||
.form__field select:hover,
|
||||
.form__field textarea:hover {
|
||||
border-color: rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
/* Eigener, deutlich sichtbarer Fokus-Ring statt des globalen Outlines */
|
||||
.form__field input:focus-visible,
|
||||
.form__field select:focus-visible,
|
||||
.form__field textarea:focus-visible {
|
||||
outline: none;
|
||||
border-color: rgb(255 255 255 / 0.75);
|
||||
box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
|
||||
}
|
||||
|
||||
.form__field ::placeholder {
|
||||
color: rgb(255 255 255 / 0.45);
|
||||
}
|
||||
|
||||
/* Fehlerzustand: per JS (aria-invalid) und nativ nach Nutzereingabe (:user-invalid) */
|
||||
.form__field input[aria-invalid="true"],
|
||||
.form__field select[aria-invalid="true"],
|
||||
.form__field textarea[aria-invalid="true"],
|
||||
.form__field input:user-invalid,
|
||||
.form__field select:user-invalid,
|
||||
.form__field textarea:user-invalid {
|
||||
border-color: var(--clr-error);
|
||||
}
|
||||
|
||||
.form__field select {
|
||||
appearance: none;
|
||||
padding-right: 2.5rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.9rem center;
|
||||
}
|
||||
|
||||
.form__field select option {
|
||||
@@ -341,6 +379,31 @@
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.form__note {
|
||||
margin: 0;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.form__required {
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.form__hint {
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.form__error-msg {
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-error);
|
||||
}
|
||||
|
||||
.form button[disabled] {
|
||||
opacity: 0.65;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.form__field textarea {
|
||||
resize: vertical;
|
||||
min-height: 8rem;
|
||||
@@ -385,3 +448,234 @@
|
||||
.form__submit {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* === Werbe-/Sponsoren-Banner (Slider) === */
|
||||
.ad-banner {
|
||||
--banner-interval: 6s;
|
||||
}
|
||||
|
||||
.ad-banner__subline {
|
||||
margin-top: 0.75rem;
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.ad-banner__track {
|
||||
list-style: none;
|
||||
margin: 2rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ad-banner__slide[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ad-banner__slide {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
padding: clamp(1.75rem, 1rem + 2vw, 3rem);
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* Optionaler Hintergrund pro Banner (data: "background").
|
||||
Dunkler Verlauf über dem Bild hält Text & CTA links lesbar. */
|
||||
.ad-banner__slide--bg {
|
||||
background-image:
|
||||
linear-gradient(to right, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.45) 60%, rgb(0 0 0 / 0.3)),
|
||||
var(--banner-bg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.ad-banner__slide--bg .ad-banner__text {
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.ad-banner__slide--bg .ad-banner__logo {
|
||||
background: rgb(0 0 0 / 0.4);
|
||||
border-color: rgb(255 255 255 / 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Auf Mobil läuft der Verlauf nach unten, damit der gestapelte Text lesbar bleibt. */
|
||||
.ad-banner__slide--bg {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.5)),
|
||||
var(--banner-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.ad-banner__tag {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: var(--fs-300);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--clr-text-muted);
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ad-banner__title {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-700);
|
||||
line-height: var(--lh-heading);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.ad-banner__text {
|
||||
max-width: 52ch;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.ad-banner__logo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 130px;
|
||||
padding: 1.5rem;
|
||||
background: rgb(0 0 0 / 0.18);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.ad-banner__logo img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 96px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ad-banner__slide {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Steuerung: Pause/Play-Taste + Indikatorleiste. */
|
||||
.ad-banner__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.ad-banner__controls[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ad-banner__toggle {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0;
|
||||
color: var(--clr-text);
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.ad-banner__toggle[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ad-banner__toggle:hover {
|
||||
background: rgb(255 255 255 / 0.2);
|
||||
}
|
||||
|
||||
.ad-banner__toggle:focus-visible {
|
||||
outline: 2px solid var(--clr-text);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Pause-Symbol (zwei Balken) im Abspiel-Zustand … */
|
||||
.ad-banner__toggle::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 13px;
|
||||
border-left: 4px solid currentColor;
|
||||
border-right: 4px solid currentColor;
|
||||
}
|
||||
|
||||
/* … Play-Dreieck, wenn pausiert. */
|
||||
.ad-banner__toggle[aria-pressed="true"]::before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 3px;
|
||||
border: 0;
|
||||
border-left: 13px solid currentColor;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
/* Indikatorleiste — die aktive Leiste füllt sich über --banner-interval. */
|
||||
.ad-banner__indicators {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.ad-banner__dot {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 6px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--clr-glass-border);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.ad-banner__dot:hover {
|
||||
background: rgb(255 255 255 / 0.35);
|
||||
}
|
||||
|
||||
.ad-banner__dot:focus-visible {
|
||||
outline: 2px solid var(--clr-text);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.ad-banner__progress {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--clr-accent);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.ad-banner__dot.is-active .ad-banner__progress {
|
||||
animation: ad-progress var(--banner-interval) linear forwards;
|
||||
}
|
||||
|
||||
.ad-banner.is-paused .ad-banner__dot.is-active .ad-banner__progress {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes ad-progress {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ad-banner__dot.is-active .ad-banner__progress {
|
||||
animation: none;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* Kontaktformular: Progressive Enhancement — ohne JS normales POST + Redirect.
|
||||
Mit JS: fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
|
||||
/* Formulare: Progressive Enhancement — ohne JS normales POST + Redirect.
|
||||
Mit JS: Inline-Feldfehler (aria-describedby, Fokus aufs erste ungültige Feld),
|
||||
fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
@@ -17,19 +18,50 @@
|
||||
mail: 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut.'
|
||||
};
|
||||
|
||||
function errorEl(field) {
|
||||
return field.id ? document.getElementById(field.id + '-error') : null;
|
||||
}
|
||||
|
||||
function showFieldError(field) {
|
||||
var msg = errorEl(field);
|
||||
field.setAttribute('aria-invalid', 'true');
|
||||
if (msg) {
|
||||
msg.textContent = field.validationMessage;
|
||||
msg.hidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearFieldError(field) {
|
||||
var msg = errorEl(field);
|
||||
field.removeAttribute('aria-invalid');
|
||||
if (msg) {
|
||||
msg.textContent = '';
|
||||
msg.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(form.elements, function (field) {
|
||||
field.addEventListener('input', function () { clearFieldError(field); });
|
||||
field.addEventListener('change', function () { clearFieldError(field); });
|
||||
});
|
||||
|
||||
function show(type, text) {
|
||||
var p = document.createElement('p');
|
||||
p.className = type === 'success' ? 'form__success' : 'form__error';
|
||||
p.textContent = text;
|
||||
status.replaceChildren(p);
|
||||
status.focus({ preventScroll: true });
|
||||
status.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
// Native Validierung zuerst (novalidate ist gesetzt, daher manuell).
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
form.reportValidity();
|
||||
var invalid = form.querySelectorAll(':invalid');
|
||||
Array.prototype.forEach.call(invalid, showFieldError);
|
||||
if (invalid.length) {
|
||||
invalid[0].focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user