Custom Error Messages doesn't work in JSF Config

[denatys]

Given the following JSON Schema, I cannot override errorMessage using createHeadlessForm()

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "browsers": {
      "title": "Browsers (solo)",
      "description": "This solo select also includes a disabled option.",
      "type": "string",
      "oneOf": [
        {
          "const": "chr",
          "title": "Chrome"
        },
        {
          "const": "ff",
          "title": "Firefox"
        },
        {
          "const": "ie",
          "title": "Internet Explorer",
          "disabled": true
        }
      ],
      "x-jsf-presentation": {
        "inputType": "select"
      }
    },
    "has_pet": {
      "title": "Has Pet",
      "description": "Do you have a pet?",
      "oneOf": [
        {
          "title": "Yes",
          "const": "yes"
        },
        {
          "title": "No",
          "const": "no"
        }
      ],
      "x-jsf-presentation": {
        "inputType": "radio"
      },
      "type": "string"
    },
    "pet_name": {
      "title": "Pet's name",
      "description": "What's your pet's name?",
      "x-jsf-presentation": {
        "inputType": "text"
      },
      "type": "string",
      "errorMessage": "string"
    }
  },
  "required": ["has_pet"],
  "x-jsf-order": ["has_pet", "pet_name"],
  "allOf": [
    {
      "if": {
        "properties": {
          "has_pet": {
            "const": "yes"
          }
        },
        "required": ["has_pet"]
      },
      "then": {
        "required": ["pet_name"]
      },
      "else": {
        "properties": {
          "pet_name": false
        }
      }
    }
  ]
}

JSF Config:

    const { fields, handleValidation } = createHeadlessForm(Schema, {
      inputTypes: {
        errorMessage: {
          required: 'This cannot be empty.',
        },
      },
    });

This is very important to be able to i18n in the application

[denatys]

formErrors: pet_name: "Required field"

[sandrina-p]

Hi @denatys,

inputTypes only supports keys that match input types like text, number, etc. It does not support generic errorTypes. As the pet_name is a text, you need to pass its type like this:

const { fields, handleValidation } = createHeadlessForm(Schema, {
      inputTypes: {
        text: {
          required: 'This cannot be empty.',
        },
      },
    });

[sandrina-p]

We understand that this might not solve what you need (apply a given message to every error type of "required"), so this can be considered a missing feature. If you can, contributions are welcome ✌️

[Girishbari]

Hey @sandrina-p, if I understood correctly, JSF needs to be able to recognize the given errorMessage and show it to the respective properties where "errorMessage": "string" is mentioned

[sandrina-p]

Yes @Girishbari , JSF needs to recognize the errorMessage type (ie, required, type, minimum, maximum, etc) and override it with the given JSF config

[Girishbari]

Why can't we simply use x-jsf-errorMessage? It does the job

{
  type: 'object',
  properties: {
    accountType: {
      type: 'string',
      enum: ['Personal', 'Business'],
    },
    companyName: {
      'type': 'string',
      'x-jsf-errorMessage': {
        required: 'Company name is required',
        type: 'Company name must be a string',
      },
    },
  },
}

[sandrina-p]

@Girishbari is two different ways of applying errors. x-jsf-errorMessage you need to declare it once per field. With JSF config you declare once and it applies to all fields.