добавлена визуализация ошибок в форме записи

src/components/langDict.tsx

@@ -91,6 +91,10 @@ export const LangDict = {
         ru: 'Заполните поле',
         en: 'Fill in the field'
     },
+    formErrorEmail: {
+        ru: 'Некорректный e-mail',
+        en: 'Invalid email'
+    },
     checkoutButton: {
         ru: 'Запланировать',
         en: 'Schedule'

src/components/mainPart/form/form.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import './form.css';
 import { useForm, Controller } from 'react-hook-form';
-import { styled, TextField} from "@mui/material";
+import { styled, SxProps, TextField} from "@mui/material";
 import { PinkButton } from "../pinkButton";
 import { ContextLang } from "../../ContextLang";
 import { LangDict } from "../../langDict";
@@ -21,10 +21,24 @@ export const Form:React.FC<TProps> = React.memo((props) => {
     const {lang} = useContext(ContextLang);
     const {control, handleSubmit} = useForm<FormData>();
     const [isError, setIsError] = useState(false);
+    const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
     
-    const CustomizedTextField = styled(TextField)`
-        background: #322948;
-        border-radius: 8px;
+
+    const errorStyle: SxProps = {
+        '& .MuiFilledInput-root.Mui-error': {
+            border: '1px solid #EB5757',
+            borderRadius: '8px',
+            
+        },
+        '& label.Mui-error': {
+            color: '#EB5757'
+        },
+        '& .MuiFormHelperText-root.Mui-error': {
+            color: '#EB5757'
+        }
+    }
+    
+    const CustomizedTextField = styled(TextField)`        
         & label {
             color: #B196AF;
             font-weight: 500;
@@ -36,10 +50,12 @@ export const Form:React.FC<TProps> = React.memo((props) => {
             font-weight: 500;
             font-size: 17px;
             line-height: 21px;
+            background: #322948;
+            border-radius: 8px;
         }                
         & label.Mui-focused {
             color: #B196AF;
-        }
+        }        
     `;
 
     function onSubmit(data: FormData) { 
@@ -47,6 +63,10 @@ export const Form:React.FC<TProps> = React.memo((props) => {
             setIsError(true);
             return
         }
+        if(!EMAIL_REGEXP.test(data.email)) {
+            console.log('dfdffd')
+            return
+        }
         // console.log(data)
         props.onSubmit(data, props.dateInfo)
     }
@@ -61,14 +81,13 @@ export const Form:React.FC<TProps> = React.memo((props) => {
                 control={control}
                 defaultValue=''
                 render={({ field }) => 
-                    <CustomizedTextField                        
+                    <CustomizedTextField
+                        sx={errorStyle}
                         {...field}
                         InputProps={{disableUnderline: true}}
                         variant={"filled"}
-                        // variant={isError && field.value === '' ? 'outlined' : "filled"}
                         size="medium"
                         label={LangDict.formName[lang]}
-                        // required
                         type={'text'}
                         autoComplete="off"
                         error={isError && field.value === ''}
@@ -82,11 +101,10 @@ export const Form:React.FC<TProps> = React.memo((props) => {
                 defaultValue=''                
                 render={({ field }) => 
                     <CustomizedTextField 
+                        sx={errorStyle}
                         {...field}
                         InputProps={{disableUnderline: true}}
                         variant={"filled"}
-                        // variant={isError && field.value === '' ? 'outlined' : "filled"}
-                        // required
                         size="medium"
                         label={LangDict.formPhone[lang]}
                         autoComplete="off"
@@ -101,19 +119,23 @@ export const Form:React.FC<TProps> = React.memo((props) => {
                 control={control}
                 defaultValue=''
                 render={({ field }) =>
-                    <CustomizedTextField                        
+                    <CustomizedTextField
+                        sx={errorStyle}
                         {...field}
                         InputProps={{disableUnderline: true}}
                         variant={"filled"}
-                        // variant={isError && field.value === '' ? 'outlined' : "filled"}
                         size="medium"
                         label='E-mail'
-                        // required
-                        type={"email"}
                         autoComplete="off"
-                        error={isError && field.value === ''}
-                        helperText={isError && field.value === '' ? LangDict.formEmptyError[lang] : ''}
-                    />                    
+                        error={(isError && field.value === '') || (isError && EMAIL_REGEXP.test(field.value))}
+                        helperText={
+                            isError && field.value === '' 
+                            ? LangDict.formEmptyError[lang] 
+                            : isError && EMAIL_REGEXP.test(field.value) 
+                            ? LangDict.formErrorEmail[lang]
+                            : null
+                        }
+                    />
                 }
             />            
             <PinkButton