Add customer search and navigation updates

frontend/src/pages/SampleRegistrationPage.tsx

@@ -35,6 +35,7 @@ export default function SampleRegistrationPage() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
+  const [showValidation, setShowValidation] = useState(false);
 
   useEffect(() => {
     async function load() {
@@ -79,6 +80,7 @@ export default function SampleRegistrationPage() {
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    setShowValidation(true);
     if (!user) {
       return;
     }
@@ -118,7 +120,7 @@ export default function SampleRegistrationPage() {
   }
 
   return (
-    <form className="page-stack" onSubmit={handleSubmit}>
+    <form className={`page-stack ${showValidation ? "show-validation" : ""}`} onSubmit={handleSubmit}>
       <section className="section-card section-card--hero">
         <div>
           <p className="eyebrow">Neuanlage</p>
@@ -141,13 +143,14 @@ export default function SampleRegistrationPage() {
       <section className="form-grid form-grid--stacked">
         <article className="section-card">
           <p className="eyebrow">Stammdaten</p>
-          <div className="field-grid">
-            <label className="field">
+          <div className="field-grid field-grid--stacked">
+            <label className="field field--required">
               <span>Landwirt</span>
               <select
                 value={farmerBusinessKey}
                 onChange={(event) => setFarmerBusinessKey(event.target.value)}
                 disabled={!editable}
+                required
               >
                 {catalogs?.farmers.map((farmer) => (
                   <option key={farmer.businessKey} value={farmer.businessKey}>
@@ -157,12 +160,13 @@ export default function SampleRegistrationPage() {
               </select>
             </label>
 
-            <label className="field">
+            <label className="field field--required">
               <span>Kuh-Nummer</span>
               <input
                 value={cowNumber}
                 onChange={(event) => setCowNumber(event.target.value)}
                 disabled={!editable}
+                required
               />
             </label>