How do I validate material-ui-phone-number with Yup?

Question

I am using material-ui-phone-number for an input field in a form. I want to validate the phone number using Yup. No matter what I type into the field, it says there is no phone number entered. I am checking the validation of the string that is suppose to be passed to Yup. From the documentation, it says material-ui-phone-number extends from Textfield so it should work with Yup.

//Yup

const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/

const validationSchema = Yup.object().shape({

    contactFirstName: Yup.string()
        .min(1, "Must have a character")
        .max(255, "Must be shorter than 255")
        .required("Must enter a first name"),

    contactLastName: Yup.string()
        .min(1, "Must have a character")
        .max(255, "Must be shorter than 255")
        .required("Must enter a last name")

    contactPhoneNumber: Yup.string()
        .matches(phoneRegExp, "Phone number is not valid")
        .required("Must enter a phone number")

})

export default validationSchema

//ContactInformation.js

    <div className="contactPhoneNumber">
            <MuiPhoneNumber 
                id="contactPhoneNumber"
                label="Phone Number"
                defaultCountry={"us"}
                variant="filled"
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.contactPhoneNumber}
                className={touched.contactPhoneNumber && errors.contactPhoneNumber ? "has-error" : null}
               />
            <Error touched={touched.contactPhoneNumber} message={errors.contactPhoneNumber}/>

//EventForm.js

export default function EventForm(){

    return (
        <Formik 
        initialValues={{eventName: "", email: "", }}
        validationSchema={validationSchema}
        onSubmit={(values, {setSubmitting, resetForm}) => {
            setTimeout(() => {

                alert(JSON.stringify(values, null, 2));

                setSubmitting(false);

            }, 400);
        }}
        >
            { ({
                values, 
                errors, 
                touched, 
                handleChange, 
                handleBlur,
                handleSubmit,
                isSubmitting
            }) => (
            <form onSubmit={handleSubmit}>

                <EventDetails values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} />
                <Divider />
                <ContactInformation values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} />

                <div className="submitButton">
                    <Button variant="outlined" type="submit" disabled={isSubmitting} >
                        Submit
                    </Button>
                </div>

            </form>
            )}
        </Formik>
    )

}

Answer 1

You need to make a change with the handleChange line.

You need to pass the key in handleChange.

<div className="contactPhoneNumber">
        <MuiPhoneNumber 
            id="contactPhoneNumber"
            label="Phone Number"
            defaultCountry={"us"}
            variant="filled"

            onChange={handleChange('contactPhoneNumber')}

            onBlur={handleBlur}
            value={values.contactPhoneNumber}
            className={touched.contactPhoneNumber && errors.contactPhoneNumber ? "has-error" : null}
           />
        <Error touched={touched.contactPhoneNumber} message={errors.contactPhoneNumber}/>

Answer 2

As you have declared validationSchema={validationSchema}

First create an object for Yup. Inside it declare your validations.

const validationSchema = Yup.object({
contactPhoneNumber: Yup.string()
        .matches(phoneRegExp, "Phone number is not valid")
        .required("Must enter a phone number")
})