React Hook form and yup validation: effective form validation method

Question

I created a Buy Now component for my React JS e-commerce website. The problem I am facing is that the validation of the form is not completed. I used a parser but it still didn't validate my form.这是我的代码：

import React, { useEffect, useState } from 'react'
import "./e.css"
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"

export default function BuyNow(props) {
    const [country, setCountry] = useState([])
    useEffect(() => {

        const getcountry = async () => {
            const res = await fetch("http://localhost:3000/setpk.json")
            const getcon = await res.json()

            setCountry(await getcon)
        }
        getcountry()

    }, [])


    const schema = yup.object({
        fullname: yup.string().required(),
        email: yup.string().email().required(),
        address: yup.string().required(),
        phoneno: yup.number().required().integer().min(11),
        city: yup.string().required(),
        payment: yup.string().required()

    })
    const { register, handleSubmit, watch, formState: { errors } } = useForm({
        resolver: yupResolver(schema)
    });

    const onSubmit = (data) => {

        console.log(data)

    }



    return (



        <>
            <div className="details h-[90vh] bg-indigo-600 mt-20 text-indigo-400 text-center">
                <h1 className='text-indigo-200'>立即购买</h1>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div className='space-y-5 mt-4 flex flex-col w-[70%] sm:w-[66%] md:w-[55%] mx-auto'>

                        <input  name="thename" id="name" placeholder='姓名' {...register("fullname")
                        } />

                        <input  name="email" id="email" placeholder='电子邮件' className="text-indigo-400 "
                            {...register("email")
                            } />


                        <input  name="address" id="address" placeholder='送货地址' {...register("address")
                        } />
                        <input type="number" name="phone" id="" placeholder='电话号码' {...register("phoneno")
                        } />
                        <select name="sa" id="as" {...register("city")
                        }>

                            <option disabled selected >--城市名称--</option>
                            {
                                country.map((countryget, i) => (
                                    <option key={i} >{countryget.city}</option>
                                ))
                            }


                        </select>
                        <div className='flex relative w-auto'>
                            <select name="" id="" className='thepayment basis-full w-[70%] ' {...register("payment")
                            }>

                                <option disabled selected > --付款方式-- </option>
                                <option >信用卡</option>
                                <option >货到付款</option>
                                <option >银行转账</option>
                            </select>
                            <img src="http://localhost:3000/creditcard.png" alt="" className='absolute w-10 right-5' />
                        </div>

                        {/* <button type="submit" className='bg-indigo-600 p-2 rounded-lg font-mono absolute '>Proceed ➔</button> */}

                    </div>
                    <input type="submit" className='bg-rose-600 p-2 rounded-lg font-mono text-white mt-3' />
                    </form>
            </div>



            <div className="pricesection h-20 bg-rose-600 fixed bottom-0 left-0 right-0 flex items-center px-1 text-rose-100 justify-evenly md:justify-around">

                <h2 className='text-xl md:text-2xl md:font-bold '>总价</h2>

                <h2 className='text-2xl font-bold '>${props.totalprice}</h2>



            </div>


        </>
    )
}

我希望表单是不受控制的。我编写了模式并使用了解析器。

Answer 1

I solved this problem by replacing yup.integer() with yup.string()

phoneno: yup.number().required().integer().min(11),