Validation is not triggered?

[Nilesh9768]

Hi Team,

This is code I have written to check if the field is empty or not.

import React from "react";
import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";

const TextField = (props) => {
  const { input } = useFieldApi(props);
  const { value, onChange } = input;
  return <input type="text" value={value} onChange={onChange} />;
};
const componentMapper = {
  [componentTypes.TEXT_FIELD]: TextField
};

const validatorMapper = {
  required: () => (value) => (value === "" ? "Field is required" : undefined)
};
const FormTemplate = ({ schema, formFields }) => {
  const { handleSubmit } = useFormApi();

  return (
    <form
      onSubmit={() => {
        handleSubmit();
      }}
    >
      {schema.title}
      {formFields}
      <button type="submit">Submit</button>
    </form>
  );
};
const schema = {
  title: "Start typing",
  fields: [
    {
      component: componentTypes.TEXT_FIELD,
      name: "custom-validator",
      label: "Custom validator",
      validate: [{ type: "required" }]
    }
  ]
};

const CustomValidator = () => (
  <FormRenderer
    FormTemplate={FormTemplate}
    componentMapper={componentMapper}
    schema={schema}
    validatorMapper={validatorMapper}
    onSubmit={console.log}
  />
);

export default CustomValidator;

But the validation is not getting triggered after clicking on submit button.

Questions:

1. What am I missing here?
2. How to trigger the validation on onChange and onSubmit?

Thank you!

[Hyperkid123]

@Nilesh9768

Hi. That is because your validator does not have the correct condition

const validatorMapper = {
  required: () => (value) => (value === "" ? "Field is required" : undefined)
};

The initial value in the form is not an empty string "" but is undefined. So your value === "" is false. You can fix it by simply adding a default value to the argument or removing the comparison. OR I am sure there is a lot of other ways. Here are some examples

// default value
const validatorMapper = {
  required: () => (value = "") =>
    value === "" ? "Field is required" : undefined
};

//const validatorMapper = {
  required: () => (value) => !value ? "Field is required" : undefined
};

BTW in order to have a custom require validator to cover all possible value types. You will need a bit more complex condition. I would suggest the default one as I believe it covers all edge cases.

If you just want to change the error message, you can customize the default validator like this: https://data-driven-forms.org/schema/custom-validator-message

[Hyperkid123]

OH. That is not something our component mappes are designed to do. If you want to hide the validation error until a form was submitted, you will have to define your own components.

I have quicky created a sample component here: https://codesandbox.io/s/exciting-rubin-yf7bdp?file=/src/App.js

Line 45 is what handles when the field error is supposed to be rendered.

  const { getState } = useFormApi();
  const { submitFailed } = getState();
  // This is what handles the error message and if its supposed to show up
  const invalid = submitFailed && meta.error;

[rvsia]

@Nilesh9768 You can return submit errors in your submit function. So you have to implement the validation manually. https://final-form.org/docs/react-final-form/types/FormProps#onsubmit

[Nilesh9768]

@Hyperkid123 I have tried the suggested approach here : https://codesandbox.io/s/data-driven-forms-example-forked-c5z7q5?file=/src/App.js

But in my case, Why is submitFailed is always false?

Also, why values and formApi are undefined in onSubmit of FormRenderer?

To reproduce the above errors, you just have to click on submit button in the form.

Thank you!

[Hyperkid123]

I think both of your questions have been answered here #1308 and here #1272

[Nilesh9768]

Yes.