diff --git a/src/pages/PersonalizationAI/AgeInputWithSelect.tsx b/src/pages/PersonalizationAI/AgeInputWithSelect.tsx index 3901310a..f7125098 100644 --- a/src/pages/PersonalizationAI/AgeInputWithSelect.tsx +++ b/src/pages/PersonalizationAI/AgeInputWithSelect.tsx @@ -10,7 +10,8 @@ import { Grow, ClickAwayListener, MenuList, - useTheme + useTheme, + FormHelperText } from '@mui/material'; import ArrowDownIcon from "@/assets/icons/ArrowDownIcon"; @@ -23,13 +24,47 @@ const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => { const theme = useTheme(); const [open, setOpen] = useState(false); const anchorRef = useRef(null); + const [errorType, setErrorType] = useState<'format' | 'range' | false>(false); + + // Валидация: только число или диапазон число-число, и диапазон 0-150 + const validate = (val: string) => { + if (!val) return false; + // Число (только положительное) + if (/^\d+$/.test(val)) { + const num = Number(val); + if (num < 0 || num > 150) return 'range'; + return false; + } + // Диапазон (только положительные числа) + const rangeMatch = val.match(/^(\d+)-(\d+)$/); + if (rangeMatch) { + const left = Number(rangeMatch[1]); + const right = Number(rangeMatch[2]); + if (left < 0 || left > 150 || right < 0 || right > 150 || left > right) return 'range'; + return false; + } + // Если есть минус не в начале диапазона — это ошибка диапазона + if (/^-?\d+-\d+$/.test(val) || /^\d+-\d+-\d+$/.test(val)) { + return 'range'; + } + return 'format'; + }; const handleInputChange = (e: React.ChangeEvent) => { - onChange(e.target.value); + const filtered = e.target.value.replace(/[^\d-]/g, ''); + onChange(filtered); + setErrorType(false); + }; + + const handleInputBlur = (e: React.FocusEvent) => { + const trimmed = e.target.value.replace(/\s+/g, ''); + onChange(trimmed); + setErrorType(validate(trimmed)); }; const handleSelectItemClick = (selectedValue: string) => { onChange(selectedValue); + setErrorType(false); setOpen(false); }; @@ -66,8 +101,10 @@ const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => { { } }} /> + {errorType === 'format' && ( + + можно только число или диапазон + + )} + {errorType === 'range' && ( + + таких возрастов нет + + )}