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.

}
@@ -94,7 +75,7 @@ export default function Form() { }, })} /> - {errors.email &&

{errors.email.message}

} + {errors.email &&

{errors.email.message}

}
@@ -114,7 +95,7 @@ export default function Form() { }, })} /> - {errors.phone &&

{errors.phone.message}

} + {errors.phone &&

{errors.phone.message}

}
@@ -176,7 +157,7 @@ export default function Form() { - {errors.option &&

Please select at least one option.

} + {errors.option &&

Please select at least one option.

}