diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 83216c28b..e6c43e7df 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -32,8 +32,8 @@ export const NewMovie: React.FC = ({ onAdd }) => { const correctImgUrl = pattern.test(imgUrl); const correctimdbUrl = pattern.test(imdbUrl); - // const isValid - // = !!title && pattern.test(imgUrl) && pattern.test(imdbUrl) && !!imdbId; + const isValid + = !!title && pattern.test(imgUrl) && pattern.test(imdbUrl) && !!imdbId; const handleInputChange = ( setter: React.Dispatch>, value: string, @@ -121,7 +121,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { className={cn('button', 'is-link', { 'is-disabled': !isFormValid, })} - disabled={!isFormValid} + disabled={!isValid} > Add diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index 882d866ec..ff6aac56e 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -24,14 +24,15 @@ export const TextField: React.FC = ({ placeholder = `Enter ${label}`, required = false, onChange = () => {}, - isValid, + isValid = true, }) => { // generage a unique id once on component load const [id] = useState(() => `${name}-${getRandomDigits()}`); // To show errors only if the field was touched (onBlur) const [touched, setTouched] = useState(false); - const hasError = touched && required && !value.trim() && !isValid; + const hasError = (touched && required && !value.trim()) + || (!isValid && touched && required); const handleTouchedChange = (event: React.ChangeEvent) => { onChange(event.target.value);