How to make typeUserAttrs required for a specific control/field type?

[jgittler]

Overall, I have had a smooth experience using formBuilder, and configuring it via the actions and options. I wanted to give props to the contributors for its easy-to-use configuration interface and extensibility. There is one thing that is causing me some confusion though.

I want to force a certain typeUserAttrs to be required. For example, if I want to make the name attr on text fields required, is there a way to do that via the options map passed into formBuilder(options)?

I see in the documentation (https://formbuilder.online/docs/formBuilder/options/typeUserAttrs/) you can configure different types of fields:

const typeUserAttrs = {
  text: {
    name: {
      label: 'Name',
      value: 'default-name',
      type: 'text'
    }
  }
};

But can you also add a required: true? I have tried this approach and it does not seem to do anything (very possible I am missing something obvious).

const typeUserAttrs = {
  text: {
    name: {
      label: 'Name',
      value: 'default-name',
      type: 'text',
      required: true
    }
  }
};

Is there a way to configure attributes on fields to be required, so that users cannot save and submit a form with empty values for attributes such as a field's name?

[jgittler]

After digging a bit more into the source code I would expect to find this configuration here:
https://github.com/kevinchappell/formBuilder/blob/master/src/js/form-builder.js#L606-L643

Are these the only configurations that can be set for a specific type of control/field?

    let textAttrs = {
      id: name + '-' + data.lastID,
      title: attrs.description || attrs.label || name.toUpperCase(),
      name: name,
      type: attrs.type || 'text',
      className: [`fld-${name}`, (classname || className || '').trim()],
      value: attrs.value || '',
    }

If so, it looks like there is no configuration for required, or am I looking in the wrong place? @kevinchappell

Again, definitely not complaining here, I really like the project. I just want to make sure this isn't something the formBuilder comes with before implementing it myself.

[kevinchappell]

required should be applied here however it's possible that it's being overwritten somewhere as the name attribute has some additional logic applied to prevent name space collision.

[jgittler]

Thanks for the info! I'll look into it further. For what it is worth, I have it hacked to allow required like so in that function: https://github.com/kevinchappell/formBuilder/blob/master/src/js/form-builder.js#L612-L643

function I(e, t) {
    const { class: r, className: o } = t,
        i = x(t, ["class", "className"]);
    let l = { id: e + "-" + c.lastID, title: i.description || i.label || e.toUpperCase(), name: e, type: i.type || "text", className: ["fld-" + e, (r || o || "").trim()], value: i.value || "" };
    // START HACK
    if (i.requried) {
        l = {...l, ...{required: true}};
    }
    const reqa = '<span class="required-asterisk" style="display:inline"> *</span>';
    const a = `<label for="${l.id}">${n[e] || ""}</label>${i.required ? reqa : '' }`;
    // END HACK
    ["checkbox", "checkbox-group", "radio-group"].includes(l.type) || l.className.push("form-control"), (l = Object.assign({}, i, l));
    return `<div class="form-group ${e}-wrap">${a}${`<div class="input-wrap">${(() => {
        if ("textarea" === l.type) {
            const e = l.value;
            return delete l.value, `<textarea ${Object(p.b)(l)}>${e}</textarea>`;
        }
        return `<input ${Object(p.b)(l)}>`;
    })()}</div>`}</div>`;
}

Maybe this provides a hint?

[kevinchappell]

@jgittler
yes definitely helpful, thank you. I'll look into spreading the remaining attrs into the attribute field, this would include required and should solve the problem.

[jgittler]

Glad I could be of some help. Thank you for your responsiveness.