Displaying errors simultaneously writing in an input

Question

I've been using Yup and Formik for form validation in React. Now when a user blurs an input then, errors are displayed. Here is my code: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

import React from "react";
import { Formik, Field } from "formik";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import * as yup from "yup";

const FirstNameInputComponent = ({ field, ...props }) => {
  const { errorMessage, touched } = props;
  const { name, value, onChange, onBlur } = field;
  return (
        <TextField                  
            value={value}
            name={name}
            error={touched && errorMessage ? true : false}
            label="نام"
            helperText={touched && errorMessage ? errorMessage : undefined}
            onChange={onChange}
            onBlur={onBlur}            
        />
  );
};

const App = () =>   {
    const validationSchema = yup.object().shape({
      first_name: yup.string().required()

    });
    return (
      <Formik
        initialValues={{
          file: undefined,
          text: undefined
        }}
        validationSchema={validationSchema}
        validateOnBlur={true}
        render={({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          setFieldValue
        }) => {
          return (
           <form>
               <Field
                  name="first_name"
                  component={FirstNameInputComponent}
                  errorMessage={errors["first_name"]}                            
                  touched={touched["first_name"]}
                  onChange={handleChange}
                  onBlur={handleBlur}
                        />
           </form>
    />
    );
    }

How can I display errors simultaneously with a user writing in an input?

It should work right away, there's a prop `validateOnChange` on `Formik` component, but it's true by default. Can you elaborate? — paolostyle, May 19 '20 at 20:47

score 0 · Answer 1 · answered May 19 '20 at 20:56

Let's say it should be 0 < foo < 10.

const [foo, setFoo] = useState(1);
const [errMsg, setErrMsg] = useState('');
// declare schema with Yup
const schema = Yup.object().shape({
  num: Yup.number()
    .min(1, 'min')
    .max(9, 'max'),
});

// in input change handler
const onInputChange = val => {
  schema
    .validate({
      num: val,
    })
    .then(() => {
      setFoo(val);
      setErrMsg('');
    })
    .catch(() => {
      setFoo(val); // comment this out if you don't want to set the value when there's an error
      setErrMsg('Number must be between 1 and 10');
    });
}

Displaying errors simultaneously writing in an input

1 Answers1