ASP.NET Core 3 and React

Invoking validation rules

We are going to execute validation rules when the field editor loses focus by carrying out the following steps:

1. In Field.tsx, we are already handling field changes with the handleChange function. Let's add a call to invoke the validation rules in this:

const { setValue, touched, validate } = useContext(  FormContext,);const handleChange = (  e: ChangeEvent<HTMLInputElement>    | ChangeEvent<HTMLTextAreaElement>) => {  if (setValue) {    setValue(name, e.currentTarget.value);  }  if (touched[name]) {    if (validate) {      validate(name);    }  }};

So, we only invoke validation if the field has been touched.

2. We need to tell the Form component when a Field has been touched. Let's create a handler for the blur event to do this just beneath ...