How can I show JSON Form validation errors only after a field is touched or the form is submitted?

Below is one common approach. By default JSON Forms (and many form libraries) will run the JSON Schema validation immediately. In your case the “required” keyword is causing the error state to be shown on load. One solution is to (1) track whether a field has been “touched” (i.e. the user focused then blurred the field) and (2) only show validation messages if the field was touched or if the form was submitted.

The general steps are:

1. Create a custom cell renderer
   Build a variant of the default Material cell that tracks the “touched” state for each field. In your custom cell, add an onBlur handler that sets a touched flag and then conditionally shows the error. For example:

   JSXCopied
   import React, { useState } from 'react';
   import TextField from '@mui/material/TextField';
   import { withJsonFormsControlProps } from '@jsonforms/react';
   
   const CustomControl = (props) => {
     const {
       data,
       handleChange,
       errors,
       path,
       id,
       label,
       schema,
       uischema,
       visible,
       enabled,
       required
     } = props;
   
     const [touched, setTouched] = useState(false);
   
     const onBlur = () => {
       setTouched(true);
     };
   
     return (
       <TextField
         id={id}
         label={label}
         value={data || ''}
         onChange={ev => handleChange(path, ev.target.value)}
         onBlur={onBlur}
         error={touched && Boolean(errors)}
         helperText={touched ? errors : ''}
         required={required}
         disabled={!enabled}
         fullWidth
       />
     );
   };
   
   export default withJsonFormsControlProps(CustomControl);

2. Register the custom cell
   Next, you need to register this new control as a cell for your string properties. For instance, you can add it to your list of cells. Make sure to give it a higher rank than the default if you want it to override the built-in one.

   JSXCopied
   // cells.js
   import CustomControl from './CustomControl';
   
   export const customCells = [
     {
       tester: (uischema, schema) => {
         if (schema.type === 'string') {
           return 5; // Adjust the rank as needed
         }
         return -1;
       },
       cell: CustomControl
     }
   ];

3. Mark all fields as touched on submit
   If you want errors to show on a submission attempt for fields that the user hasn’t touched, a common strategy is to have a “submitted” flag in your container. Then you can pass this flag down (via context or extra props) so that your custom cell renderer treats “submitted” fields as automatically touched. For example, modify the helper part of your custom cell:

   JSXCopied
   const CustomControl = (props) => {
     // ... same as above, plus:
     const { isSubmitted } = props; // Pass this extra flag
     
     const showError = touched || isSubmitted;
   
     return (
       <TextField
         id={id}
         label={label}
         value={data || ''}
         onChange={ev => handleChange(path, ev.target.value)}
         onBlur={() => setTouched(true)}
         error={showError && Boolean(errors)}
         helperText={showError ? errors : ''}
         required={required}
         disabled={!enabled}
         fullWidth
       />
     );
   };

   And then when rendering JsonForms in your container component, pass the flag (by extending your props or adding a custom uischema option):

   JSXCopied
   <JsonForms
     schema={schema}
     uischema={uischema}
     data={formData}
     renderers={materialRenderers}
     // Combine both cell arrays – materialCells and your new customCells
     cells={[...materialCells, ...customCells]}
     onChange={({ data }) => setFormData(data)}
     // Assuming your custom control picks up extra props
     extraProps={{ isSubmitted: submitted }}
   />

4. Integrate with your submit handler
   In your submit handler, set the submitted state so that all fields will be flagged as touched. This will make sure that all errors are shown if the user submits without filling in the required fields.

   JSXCopied
   const onSubmit = async () => {
     // Force errors to be shown if the required fields are missing
     setSubmitted(true);
     if (validateForm()) {
       try {
         await axios.post('/api/leads', formData);
         setSubmitted(true);
       } catch (error) {
         console.error('Submission failed', error);
       }
     }
   };

This approach ensures:

• On Load: No errors are shown because none of the fields have been touched.
• On Blur: When a user focuses on a field and then blurs it, if the field is still empty, the error will appear.
• On Submit: If the user submits the form, any remaining errors will be displayed.

Feel free to adjust the cell “tester” ranking and the extra properties as needed for your implementation.