diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx index 4711dfd..a8be677 100644 --- a/src/components/BoardModalWindow/BoardModalWindow.jsx +++ b/src/components/BoardModalWindow/BoardModalWindow.jsx @@ -21,7 +21,7 @@ export const BoardModalWindow = ({ const [background, setBackground] = useState(); const [icon, setIcon] = useState(''); const [isValid, setIsValid] = useState(false); - // const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false); + const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false); const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false); const handleSubmit = e => { @@ -46,7 +46,7 @@ export const BoardModalWindow = ({ }; const handleChange = e => { - const cyrillicRegex = /^[a-zA-Z]+$/; + const cyrillicRegex = /^[^\u0400-\u04FF]+$/; setTitle(e.target.value); if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) { @@ -55,6 +55,12 @@ export const BoardModalWindow = ({ } else { setErrorCirillicaTitle(false); } + + if (e.target.value.length === 64) { + setErrorTitleMaxLength(true); + } else { + setErrorTitleMaxLength(false); + } }; return ( @@ -64,10 +70,16 @@ export const BoardModalWindow = ({ className={`${s.inputModal} ${s[theme]}`} value={title} placeholder={'Title'} + maxLength="64" onChange={handleChange} /> {isValid &&

required field

} - {errorCirillicaTitle && ( + {errorTitleMaxLength && ( +

+ you have reached the symbols limit +

+ )} + {errorCirillicaTitle && !errorTitleMaxLength && (

invalid characters (latin alphabet only)

diff --git a/src/components/BoardModalWindow/BoardModalWindow.module.scss b/src/components/BoardModalWindow/BoardModalWindow.module.scss index b6e9556..89c8854 100644 --- a/src/components/BoardModalWindow/BoardModalWindow.module.scss +++ b/src/components/BoardModalWindow/BoardModalWindow.module.scss @@ -1,6 +1,7 @@ @import '../../assets/styles/vars'; @import '../../assets/styles/mixins'; +.errorTitleMaxLength, .errorCirillicaTitle, .errorTitle { position: absolute; diff --git a/src/components/CardModalWindow/CardModalWindow.jsx b/src/components/CardModalWindow/CardModalWindow.jsx index 6b976af..0bf7ca8 100644 --- a/src/components/CardModalWindow/CardModalWindow.jsx +++ b/src/components/CardModalWindow/CardModalWindow.jsx @@ -60,7 +60,7 @@ export const CardModalWindow = ({ }; const handleChange = e => { - const cyrillicRegex = /^[a-zA-Z]+$/; + const cyrillicRegex = /^[^\u0400-\u04FF]+$/; setValue(e.target.value); if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) { @@ -77,7 +77,7 @@ export const CardModalWindow = ({ }; const handleChangeDescription = e => { - const cyrillicRegex = /^[a-zA-Z]+$/; + const cyrillicRegex = /^[^\u0400-\u04FF]+$/; setComent(e.target.value); if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) { diff --git a/src/components/ColumnModalWindow/ColumnModalWindow.jsx b/src/components/ColumnModalWindow/ColumnModalWindow.jsx index 6d9f538..973a8a2 100644 --- a/src/components/ColumnModalWindow/ColumnModalWindow.jsx +++ b/src/components/ColumnModalWindow/ColumnModalWindow.jsx @@ -22,6 +22,7 @@ export const ColumnModalWindow = ({ const theme = useSelector(selectorTheme); const [isValid, setIsValid] = useState(false); const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false); + const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false); // const updateBoard = ()=>{ // setTimeout(()=>{dispatch(getBoardById(boardId)),0 }) @@ -55,7 +56,7 @@ export const ColumnModalWindow = ({ }; const handleChange = e => { - const cyrillicRegex = /^[a-zA-Z]+$/; + const cyrillicRegex = /^[^\u0400-\u04FF]+$/; if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) { setErrorCirillicaTitle(true); @@ -63,6 +64,13 @@ export const ColumnModalWindow = ({ } else { setErrorCirillicaTitle(false); } + + if (e.target.value.length === 64) { + setErrorTitleMaxLength(true); + } else { + setErrorTitleMaxLength(false); + } + setValue(e.target.value); }; return ( @@ -72,10 +80,16 @@ export const ColumnModalWindow = ({ className={`${s.inputModal} ${s[theme]}`} value={value} placeholder="Title" + maxLength="64" onChange={handleChange} /> {isValid &&

required field

} - {errorCirillicaTitle && ( + {errorTitleMaxLength && ( +

+ you have reached the symbols limit +

+ )} + {errorCirillicaTitle && !errorTitleMaxLength && (

invalid characters (latin alphabet only)

diff --git a/src/components/ColumnModalWindow/ColumnModalWindow.module.scss b/src/components/ColumnModalWindow/ColumnModalWindow.module.scss index a21f67c..dc5ef16 100644 --- a/src/components/ColumnModalWindow/ColumnModalWindow.module.scss +++ b/src/components/ColumnModalWindow/ColumnModalWindow.module.scss @@ -85,6 +85,7 @@ } } +.errorTitleMaxLength, .errorCirillicaTitle, .errorTitle { position: absolute; diff --git a/src/components/SchemaValidation/schemaValidation.jsx b/src/components/SchemaValidation/schemaValidation.jsx index c807e0e..4d184f0 100644 --- a/src/components/SchemaValidation/schemaValidation.jsx +++ b/src/components/SchemaValidation/schemaValidation.jsx @@ -24,10 +24,10 @@ export const validationSchemaRegister = yup.object().shape({ userName: yup .string() .matches( - /^[a-zA-Z0-9]+([-_ ][a-zA-Z0-9]+)*$/, - // 'Only letters, numbers, underscores, spaces, hyphens, and dashes are allowed between words', - 'Invalid name' - ) + /^[a-zA-Z0-9]+([-_ ][a-zA-Z0-9]+)*$/, + // 'Only letters, numbers, underscores, spaces, hyphens, and dashes are allowed between words', + 'Invalid name', + ) .min(2, 'Minimum length 2 characters') .max(32, 'Maximum length 32 characters') .required('Name required'), @@ -48,4 +48,4 @@ export const validationSchemaRegister = yup.object().shape({ .min(8, 'Minimum length 8 characters') .max(64, 'Maximum length 64 characters') .required('Password required'), -}); \ No newline at end of file +});