show min and max length form validation error in react?

Question

I am using the package below to generate a form dynamically:

https://www.npmjs.com/package/react-formio

I have generated a simple login-form using this link https://codesandbox.io/s/cra-react-formio-iy8lz

After building, it creates a JSON. Then, I generate a form using that JSON.

https://codesandbox.io/s/quirky-chatelet-5ujhj

I want to show custom messages like required field and min length error message and max length error message

ReactDOM.render(
  <Form
    src={{
      display: "form",
      components: [
        {
          label: "Name",
          validate: {
            required: true,
            json: {
              if: [
                {
                  "===": [
                    {
                      var: "data.name"
                    },
                    ""
                  ]
                },
                true,
                "required!"
              ]
            },
            minLength: 5,
            maxLength: 15
          },
          key: "name",
          type: "textfield",
          input: true
        },
        {
          type: "button",
          label: "Submit",
          key: "submit",
          //  disableOnInvalid: true,
          input: true
        }
      ]
    }}
    options={{ noAlerts: true }}
    onSubmit={i => {
      alert(JSON.stringify(i.data));
    }}
  />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);

Answer 1

Couple of suggestions.

You should use form attribute instead of a src attribute. While the posted code has the correct syntax, the codesandbox still uses.

<FormBuilder
        src={{}} />

As mentioned by @ShubhamVerma, you should use custom javascript validation.

Also as this is the second question you are asking regarding formio, I'm not sure how you are creating the JSON.

You should go to the validation tab of a component and you can see the different options available, that you can play around with. In your case you can enter validation script in the custom validation section. The section also describes all the variables available for access.

if (input.length === 0){
  valid = "You should enter something";
}
else{
  if(input.length < 3){
    valid = `Min length is 3`;
  }else if (input.length > 15){
    valid  = `Max length is 15`
  }else{
    valid = true
  }
} 

Also note that you might have to override the css to display the form errors placeholder. Looks like bootstrap is setting it to display:none.

styles.css

.formio-errors.invalid-feedback {
  display: block;
} 

Demo

If the form customization tabs don't open from codesandbox embedded browser, try to open in a new window.

..............................................................................................................................👇

https://iy8lz.csb.app/