Skip to content

BUG? Field label required for validation message to be displayed #302

@cvalarida

Description

@cvalarida

I'm not sure this qualifies as a bug exactly, but it seemed fitting enough. It seems like a bug that I can accidentally hide the validation messages.

Describe the bug
The field label is required to show validation messages, which means we have to employ some odd workarounds at times. For example, let's say we want to make the following:

image

We could do something like:

uiSchema:
  'view:uploadPrivateRecords': {
    'ui:title':
      'Do you want to upload your private medical records?',
    'ui:widget': 'radio',
    'ui:options': {
      labels: {
        yes: 'Yes',
        no: 'No, please get them from my doctor',
      },
    },
  },
  'view:patientAcknowledgement': {
    'ui:options': {
      expandUnder: 'view:uploadPrivateRecords',
      expandUnderCondition: 'no',
    },
  },
  'view:patientAcknowledgementDescription': {
    'ui:description': patientAcknowledgmentText
  },
},
schema: {
  type: 'object',
  required: ['view:uploadPrivateRecords'],
  properties: {
    'view:uploadPrivateRecords': {
      type: 'string',
      enum: ['yes', 'no'],
    },
    'view:patientAcknowledgement': {
      type: 'object',
      required: ['view:acknowledgement'],
      properties: {
        'view:acknowledgement': {
          type: 'boolean',
          default: true,
        },
      },
    },
    'view:patientAcknowledgementDescription': {
      type: 'object',
      properties: {},
  },
}

But when the check box isn't checked and the validation is triggered, the validation message doesn't appear on the screen. This is because the check box--the field that triggered the validation--doesn't have a title for the message to "hook" onto. We then have to change it up and add an "empty" title, which creates the awkward space between the radio button and check box in the screenshot above.

uiSchema:
  'view:uploadPrivateRecords': {
    'ui:title':
      'Do you want to upload your private medical records?',
    'ui:widget': 'radio',
    'ui:options': {
      labels: {
        yes: 'Yes',
        no: 'No, please get them from my doctor',
      },
    },
  },
  'view:patientAcknowledgement': {
    'ui:title': ' ',
    'ui:help': patientAcknowledgmentText,
    'ui:options': {
      expandUnder: 'view:uploadPrivateRecords',
      expandUnderCondition: 'no',
      showFieldLabel: true,
    },
  }
},
schema: {
  type: 'object',
  required: ['view:uploadPrivateRecords'],
  properties: {
    'view:patientAcknowledgement': {
      type: 'object',
      required: ['view:acknowledgement'],
      properties: {
        'view:acknowledgement': {
          type: 'boolean',
          default: true,
        },
      },
    },
    'view:privateRecordsChoiceHelp': {
      type: 'object',
      properties: {},
    },
  },
}

I think we can generalize the issue and say that the developer shouldn't be able to pass any combination of options to the field that will hide validation messages. Allowing that makes it confusing when we accidentally pass a bad configuration and can't figure out why the validation message isn't showing up. Those are the kinds of things, I think, that make developers shy away from certain libraries.

To Reproduce
🤔 I guess try the above?

  1. Create a boolean field
  2. Don't give it a ui:option of showFieldLabel: true
  3. Give it a custom validation
  4. Go through the form and trigger the validation

Expected behavior
As a developer, I should be able to pass any valid configuration to any field and still expect validation messages to show up when appropriate.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions