diff --git a/src/stories/Components/Form.jsx b/src/stories/Components/Form.jsx index 2458014..2914819 100644 --- a/src/stories/Components/Form.jsx +++ b/src/stories/Components/Form.jsx @@ -7,27 +7,8 @@ export default function Form() { register, handleSubmit, formState: { errors }, - watch, } = useForm(); - // Use watch to track changes in form values - const name = watch("name"); - const email = watch("email"); - const phone = watch("phone"); - const option = watch("option"); - - const [isNameValid, setIsNameValid] = React.useState(false); - const [isEmailValid, setIsEmailValid] = React.useState(false); - const [isPhoneValid, setIsPhoneValid] = React.useState(false); - const [isOptionValid, setIsOptionValid] = React.useState(false); - - React.useEffect(() => { - setIsNameValid(name?.length <= 30); - setIsEmailValid(email && /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)); - setIsPhoneValid(phone?.length === 10); - setIsOptionValid( !!option); - }, [name, email, phone, option]); - const onSubmit = (data) => { console.log(data); }; @@ -54,7 +35,7 @@ export default function Form() {
{" "} - Level 1, Phoenix Tech Tower Plot No: 14/46, Survey No.1, IDA + Level 1, Phoenix Tech Tower Plot No : 14/46, Survey No.1, IDA Uppal, Hyderabad, Telangana 500039 @@ -73,7 +54,7 @@ export default function Form() { id="name" {...register("name", { maxLength: 30 })} /> - {errors.name &&Name shouldn't be more than 30 characters.
} + {errors.name &&Name should not be more than 30 characters.
}{errors.email.message}
} + {errors.email &&{errors.email.message}
}{errors.phone.message}
} + {errors.phone &&{errors.phone.message}
}Please select at least one option.
} + {errors.option &&Please select at least one option.
}