error handling

server/frontend/main/api.js

@@ -49,7 +49,47 @@ document.addEventListener("DOMContentLoaded", () => {
 
         } catch (err) {
             console.error(err);
-            alert('Ошибка: ' + err.message);
+            showErrors(err.message);
         }
     });
-});
+});
+
+const fieldMap = {
+    'name': 'ffname',
+    'middlename': 'fmname',
+    'surname': 'flname'
+  };
+  
+  function showErrors(errors) {
+    let errorElements = document.querySelectorAll(".formError")
+    if (errorElements.length === 0) {
+      document.querySelectorAll('.label_style').forEach(el => {
+        const errorElem = document.createElement('div');
+        errorElem.className = 'formError';
+        errorElem.style.cssText = `
+          color: red;
+          margin-top: 10px;
+          margin-bottom: 10px;
+          font-size: 14px;
+          font-weight: 100;
+          line-height: 120%;
+          transition: 3s;
+        `;
+        el.after(errorElem);
+      });
+    }  
+    errors.forEach(error => {
+      const fieldName = error.loc[1]; // 'name', 'middlename', 'surname'
+      const inputId = fieldMap[fieldName];
+      if (!inputId) return;
+  
+      const input = document.getElementById(inputId);
+      if (!input) return;
+      const label = input.closest('.label_style');
+      if (label && label.nextElementSibling?.classList.contains('formError')) {
+        label.nextElementSibling.textContent = error.msg;
+      }
+    });
+  }
+  
+

server/frontend/main/index.html

@@ -442,7 +442,7 @@
                         <label class="label_style">Имя
                             <input type="text" name="firstName" id="ffname" required>
                         </label>
-
+                        <p>text</p>
                         <label class="label_style">Отчество
                             <input type="text" name="middleName" id="fmname" required>
                         </label>
@@ -468,7 +468,7 @@
                         </label>
 
                         <label class="option">
-                            <input type="radio" name="food" id="rfish" value="fish">
+                            <input type="radio" name="food" id="rfish" value="fish" required>
                             Рыба
                         </label>
                     </div>