Required not working for radio, checkboxes

[tsawler]

Hello:

Making a checkbox group, radio group, or textarea required seems to be non-functional. Although the field shows up as required in the editor, and the correct value is included in the generated JSON file, the rendered form html does not include the "required" attribute on these three controls.

I'll see if I can figure out where it is supposed to be applied in the source, but you can probably find it much faster than I can....

Edit: apparently it does work for textareas. Definitely not radio/checkboxes, though. I've been sifting through the source to figure out why, but I'm not much of a JavaScript guy. I'll keep trying, though.

[tsawler]

Further info:

To duplicate, go to the online example and drag in a text input and a radio group. Make both required. Generate the form, and then inspect the generated HTML. The text input has the required attribute, but the radio group does not.

[nproto]

The same problem exists for all extra attributes added to radio and checkbox controls. They are not applied to the field by the form renderer. The issue seems to exist since June 2017 see #256 and #85

[sops21]

I was able to get attributes and required working for checkboxes (I didn't tryradio boxes). I added a custom control with the following config:

{ tag: 'input', attrs: { type: 'checkbox', required: true, className: 'over13' }, config: { label: 'Custom Checbox', disabledAttrs: ['type'], hideLabel: false }, meta: { group: 'common', icon: 'checkbox', id: 'customcheckbox' }, },

This does not allow for the checkboxes to be grouped, but you can add attributes.

[tsawler]

This looks helpful! Thanks.

[carperei]

got it working for radio and checkboxes:

common/dom.js:410 ` processOptions(options, elem, isPreview) { const { action, attrs } = elem const fieldType = attrs.type || elem.tag const id = attrs.id || elem.id

const optionMap = (option, i) => {
  const { label, ...rest } = option
  const defaultInput = () => {
    const input = {
      tag: 'input',
      attrs: {
        name: id,
        type: fieldType,
        value: option.value || '',
        id: `${id}-${i}`,
        required: elem.attrs.required, //fix
        ...rest,
      },
      ...

`