Formulare: Der Unterschied liegt in den Zuständen

Dies ist der Code des oben eingebundenen Beispiels. Die CSS-Datei wird neben der React-Datei gespeichert und von ihr importiert.

coaching-date-field-solution.tsx

"use client";

import { useEffect, useRef, useState, type FormEvent } from "react";
import "./coaching-date-field-solution.css";

export function CoachingDateFieldSolution() {
  const [date, setDate] = useState("2026-10-31");
  const [rule, setRule] = useState<"limit" | "warning">("limit");
  const [disabled, setDisabled] = useState(false);
  const [touched, setTouched] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [result, setResult] = useState("");
  const [badInput, setBadInput] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const projectEnd = "2026-10-24";
  // The date value is ISO (YYYY-MM-DD), or empty. Also check native badInput.
  const exceedsEnd = Boolean(date && date > projectEnd);
  const showFeedback = !disabled && (touched || submitted);
  const invalid = showFeedback && (badInput || (exceedsEnd && rule === "limit"));
  const warning = showFeedback && !badInput && exceedsEnd && rule === "warning";

  useEffect(() => {
    if (submitted && invalid) inputRef.current?.focus();
  }, [submitted, invalid]);

  function resetFeedback() {
    setTouched(false);
    setSubmitted(false);
    setResult("");
  }

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (disabled) return;
    // Read the current native value, including an unfinished or cleared date.
    const currentDate = inputRef.current?.value ?? date;
    const malformed = Boolean(inputRef.current?.validity.badInput);
    const exceedsCurrentEnd = Boolean(currentDate && currentDate > projectEnd);
    setDate(currentDate);
    setBadInput(malformed);
    setSubmitted(true);
    setResult("");
    if (malformed || (exceedsCurrentEnd && rule === "limit")) return;
    setResult(currentDate
      ? `Simulation erfolgreich: Aufgabe mit Fälligkeitsdatum ${currentDate} erstellt${exceedsCurrentEnd ? " – der Hinweis zum Projektende bleibt bestehen" : ""}.`
      : "Simulation erfolgreich: Aufgabe ohne Fälligkeitsdatum erstellt.");
  }

  return <div className="due-solution">
    <fieldset className="due-controls">
      <legend>Fachregel für diese Musterlösung</legend>
      <label><input type="radio" name="date-rule" checked={rule === "limit"} onChange={() => { setRule("limit"); resetFeedback(); }} /> Harte Grenze</label>
      <label><input type="radio" name="date-rule" checked={rule === "warning"} onChange={() => { setRule("warning"); resetFeedback(); }} /> Nur warnen</label>
    </fieldset>
    <label className="due-disable"><input type="checkbox" checked={disabled} onChange={event => { setDisabled(event.target.checked); resetFeedback(); }} /> Archiviertes Projekt simulieren</label>
    <p className="due-rule-note">{rule === "limit"
      ? "Fachregel: Aufgaben dürfen nicht nach dem Projektende fällig sein."
      : "Fachregel: Aufgaben dürfen nach dem Projektende fällig sein; ein Hinweis macht darauf aufmerksam."}</p>
    <form noValidate onSubmit={submit}>
      <label className="due-label" htmlFor="solution-due-date">Fälligkeitsdatum <span>(optional)</span></label>
      <input ref={inputRef} className="due-input" id="solution-due-date" type="date" value={date} disabled={disabled}
        aria-invalid={invalid || undefined}
        aria-describedby={`solution-date-help${disabled ? " solution-date-disabled" : invalid ? " solution-date-error" : warning ? " solution-date-warning" : ""}`}
        onBlur={event => { setDate(event.target.value); setTouched(true); setBadInput(event.target.validity.badInput); }}
        onChange={event => { setDate(event.target.value); setBadInput(event.target.validity.badInput); setResult(""); }} />
      <p className="due-help" id="solution-date-help">Projektende: 24.10.2026. Du kannst das Datum leer lassen.</p>
      {disabled && <p className="due-disabled-reason" id="solution-date-disabled">Das Projekt ist archiviert. Neue Aufgaben und Datumsänderungen sind deshalb nicht verfügbar.</p>}
      {invalid && <p className="due-error" id="solution-date-error" role="alert"><strong>Fälligkeitsdatum ungültig:</strong> {badInput ? "Gib ein vollständiges, gültiges Datum ein oder lasse das Feld leer." : "Wähle den 24.10.2026 oder ein früheres Datum, oder lasse das Feld leer."}</p>}
      {warning && <p className="due-warning" id="solution-date-warning" role="status"><strong>Hinweis:</strong> Das Datum liegt nach dem Projektende. Du darfst die Aufgabe trotzdem erstellen.</p>}
      <div className="due-actions"><button className="due-submit" type="submit" disabled={disabled}>Aufgabe erstellen</button><button className="due-reset" type="button" onClick={() => { setDate("2026-10-31"); setRule("limit"); setDisabled(false); resetFeedback(); }}>Zurücksetzen</button></div>
      <div className="due-result" role="status" aria-live="polite">{result && <p>{result}</p>}</div>
    </form>
    <p className="due-demo-note">Lokales Lernbeispiel: Es werden keine Aufgaben gespeichert oder versendet. Die Erfolgsmeldung simuliert ausschließlich das Ergebnis der Eingabeprüfung.</p>
  </div>;
}

coaching-date-field-solution.css

.due-solution{max-width:700px;border:1px solid #d5dbe5;border-radius:12px;padding:24px;background:#fff;color:#1c2633}
.due-controls{display:flex;flex-wrap:wrap;gap:12px 24px;border:0;padding:0;margin:0}
.due-controls legend{font-size:15px;font-weight:600;line-height:1.7;margin-bottom:12px}
.due-controls label,.due-disable{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.8;min-height:44px}
.due-controls input,.due-disable input{width:18px;height:18px;accent-color:#2558ed;flex-shrink:0}
.due-disable{margin-top:10px}
.due-solution p.due-rule-note{font-size:13px;line-height:1.8;color:#505d70;margin:12px 0 24px;padding-bottom:20px;border-bottom:1px solid #d5dbe5}
.due-label{display:block;font-size:14px;font-weight:600;margin-bottom:10px;line-height:1.7}
.due-label span{font-weight:400}
.due-input{display:block;width:100%;min-width:0;max-width:380px;min-height:48px;border:2px solid #737e90;border-radius:6px;padding:10px 12px;background:#fff;color:#1c2633;font:16px/1.5 sans-serif}
.due-input[aria-invalid=true]{border-color:#a32626}
.due-input:focus{outline:3px solid #2558ed;outline-offset:3px}
.due-input:disabled{color:#5e6775;background:#eef0f3;border-color:#b6bec9;cursor:not-allowed;opacity:1}
.due-solution p.due-help,.due-solution p.due-disabled-reason{font-size:13px;line-height:1.8;color:#505d70;margin-top:12px}
.due-solution p.due-error{font-size:14px;line-height:1.8;color:#a32626;margin-top:12px}
.due-solution p.due-warning{font-size:14px;line-height:1.8;color:#79500d;background:#fff7e4;padding:12px;border-left:3px solid #96631b;margin-top:12px}
.due-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.due-submit,.due-reset{min-height:46px;padding:10px 16px;font-size:14px;line-height:1.7;border-radius:6px}
.due-submit{background:#2558ed;color:white;border:1px solid #2558ed}
.due-submit:hover:not(:disabled){background:#1743cb}
.due-submit:disabled{color:#5e6775;background:#e4e8ef;border-color:#bdc6d4;cursor:not-allowed}
.due-reset{background:white;border:1px solid #737e90;color:#253147}
.due-solution :is(button,input):focus-visible{outline:3px solid #2558ed;outline-offset:3px}
.due-result:not(:empty){border-left:3px solid #286744;background:#eaf4ed;padding:16px;margin-top:20px}
.due-result p{font-size:14px;line-height:1.8;color:#245138;margin:0}
.due-solution p.due-demo-note{font-size:12px;line-height:1.8;color:#505d70;margin-top:20px}
@media(max-width:640px){.due-solution{padding:20px}.due-actions{align-items:stretch}.due-controls{gap:0 16px}.due-controls label,.due-disable{font-size:13px}.due-input{width:100%}}