Formik + Yup form string validation not working with either Material UI TextField +useFormik or Formik component

Question

I have created a few different versions of a Formik form using different methods to try to get error handling to work properly (specifically, to reject inputs in certain fields if those inputs are not strings). Struggling to see why a non-string isn't getting picked up and throwing an error...

Here's my first attempt, which uses Material UI TextField + useFormik

import { useFormik } from 'formik';
import * as yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { IAssetDTO } from '../types/types';

const validationSchema = yup.object({
    id: yup
        .string()
        .min(1, "Please enter id more than 1 character")
        .required("This field is required"),
    name: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),
    tags: yup
        .array()
        .nullable(),
    type: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),
    s3URL: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),
    thumbnailImageURL: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),

});



//create your own upload component 
export const EditAssetForm = (props:IAssetDTO) => {

    const formik = useFormik({
        initialValues: {
            id: props.id,
            name: props.name,
            tags: props.tags,
            type: props.type,
            s3URL: props.s3URL,
            thumbnailImageURL: props.thumbnailImageURL,
            createdAt:props.createdAt,
            updatedAt:props.createdAt

        },
        validationSchema: validationSchema,
        onSubmit: (values) => {
            
            console.log("logging values" +JSON.stringify(values))
    
            alert(JSON.stringify(values, null, 2));
        },
    });

    return (
        <div>
           
            <form onSubmit={formik.handleSubmit}>
                <TextField
                    fullWidth
                    id="id"
                    name="id"
                    label="ID"
                    value={formik.values.id}
                    onChange={formik.handleChange}
                    error={formik.touched.id && Boolean(formik.errors.id)}
                    helperText={formik.touched.id && formik.errors.id}
                />...

Everything renders fine, and the proper error gets thrown for character minimum, and being required. But if I enter a string, no error gets thrown.

Here's my second attempt, in which I changed the component to use Formik, Form, and Field with schema validation

import { Formik, Form, Field } from 'formik';
 import * as Yup from 'yup';
 import { IAssetDTO } from '../types/types';
 
 const ValidationSchema = Yup.object().shape({
    id: Yup
    .string()
    .min(25, "Please enter id more than 25 character")
    .required("This field is required"),
name: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
tags: Yup
    .array()
    .nullable(),
type: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
s3URL: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
thumbnailImageURL: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
 });
 
 export const NewEditAssetForm = (props:IAssetDTO) => (
   <div>
     <h1>Signup</h1>
     <Formik
       initialValues={{
        id: props.id,
        name: props.name,
        tags: props.tags,
        type: props.type,
        s3URL: props.s3URL,
        thumbnailImageURL: props.thumbnailImageURL,
        createdAt:props.createdAt,
        updatedAt:props.createdAt

    }}
       validationSchema={ValidationSchema}
       onSubmit={values => {
       console.log("logging values" +JSON.stringify(values))
    
        alert(JSON.stringify(values, null, 2));
       }}
     >
       {({ errors, touched }) => (
         <Form>
           <Field name="id" />
           {errors.id && touched.id ? (
             <div>{errors.id}</div>
           ) : null}...

Still no errors get thrown when input value is not a string (when I input a number, for example).

I though maybe it is because I am passing props to the form? So I took the props out.

My last attempt used the exact copy and paste of the validation schema example and is not throwing errors when the input is a number.

What simple thing am I missing?

Thanks

Luvesh L Sadhwani Luvesh L Sadhwani · Accepted Answer · 2021-08-26T06:45:38

For any string validations from Yup, they accept alphanumeric values. You would want to explore regex if you wanted letters only (for example a name).

Formik + Yup form string validation not working with either Material UI TextField +useFormik or Formik component

1 Answers