form-builder-vlad [![Version Badge][npm-version-svg]][npm-url]

Hello, Josiah Mann ! Hope this page finds you.

I'd like to discuss the possibility of continuing our partnership, and I was wondering if you would be open to communicating through Telegram or Skype. These platforms provide a convenient way for us to discuss future projects and keep our communication efficient.

Please let me know your preferred mode of communication and share your username or contact details so that we can reconnect as soon as possible. I look forward to hearing from you.

Thank you!

Best regards,

Vladimir

My Contact Details:

email: [email protected] telegram: https://t.me/luckycstar555 Skype: live:.cid.c8fa2151ae7436d3

$ npm install form-builder-vlad

Contribute

This code is still in its infancy, and I'd really appreciate any contributions, bug reports, or advice. Especially on the following key areas:

• Creating sensible default rendering functions that generate flexible, accessible markup. This is an early priority because without being confident that the standard markup won't change under their feet, developers will not be able to adopt the module for any sort of production use.
• Exploring write-once validation that works on the client and the server. There are some unique advantages to using the same language at both ends, let's try and make the most of it!
• Ensuring it's easy to use with existing node web frameworks. Ideally this module would integrate well with projects using any of the popular frameworks.

[Contributors]

• luckycstar

Example

Creating an example registration form:

import React from "react";
import "./index.css";
import Form from "form-builder-vlad/dist/Forms/Form";
import AddCustomButtons from "form-builder-vlad/dist/AddCustomButtons";

function App() {
  const [settings, setSettings] = React.useState({
    type: "modal",
    size: "sm:ns-max-w-lg",
    anchor: "auto",
    progress_on: "click-element",
    show_default_buttons: true,
    custom_buttons: [],
  });

  return (
    <div
      className="App"
      style={{
        maxWidth: "1000px",
        margin: "30px auto",
      }}
    >
      <Form
        model={{
          type: {
            type: "select",
            label: "Step Type",
            options: [
              { label: "Modal", value: "modal" },
              { label: "Pointer", value: "pointer" },
            ],
            value: settings.type,
          },
          size: {
            type: "select",
            label: "Modal Size",
            options: [
              { label: "Small", value: "sm:ns-max-w-lg" },
              { label: "Medium", value: "sm:ns-max-w-xl" },
              { label: "Large", value: "sm:ns-max-w-2xl" },
              { label: "Extra Large", value: "sm:ns-max-w-3xl" },
              { label: "Full Screen", value: "sm:ns-max-w-full" },
            ],
            value: settings.size,
            logic: {
              hide: [["type", "!==", "modal"]],
            },
          },
          anchor: {
            type: "select",
            label: "Placement",
            options: [
              { label: "Auto", value: "auto" },
              { label: "Top Left", value: "top-start" },
              { label: "Top Center", value: "top" },
              { label: "Top Right", value: "top-end" },
              { label: "Middle Right", value: "right" },
              { label: "Bottom Right", value: "bottom-end" },
              { label: "Bottom Center", value: "bottom" },
              { label: "Bottom Left", value: "bottom-start" },
              { label: "Middle Left", value: "left" },
            ],
            value: settings.anchor,
            logic: {
              hide: [["type", "!==", "pointer"]],
            },
          },
          progress_on: {
            type: "select",
            label: "Progress On",
            options: [
              {
                label: "Click of the element",
                value: "click-element",
              },
              { label: "Next or Done button", value: "click-next" },
            ],
            value: settings.progress_on,
          },
          show_default_buttons: {
            type: "switch",
            cast: "boolean",
            label: "Show Default Buttons",
            logic: {
              hide: [["type", "!==", "modal"]],
            },
            value: settings.show_default_buttons,
          },
          custom_buttons: {
            type: "custom",
            label: "Custom Buttons",
            render: (value, onChange) => {
              return <AddCustomButtons value={value} onChange={onChange} />;
            },
          },
        }}
        onChange={(value) => {
          console.log(value);
        }}
        onSubmit={(e, value) => {
          e.preventDefault();
          console.log(value);
        }}
      />
    </div>
  );
}

export default App;

Supported options:

• validatePastFirstError: true, otherwise assumes false
  • If false, the first validation error will halt form validation.
  • If true, all fields will be validated.

Form object

Attributes

• fields - Object literal containing the field objects passed to the create function

form.handle(req, callbacks)

Inspects a request or object literal and binds any data to the correct fields.

form.bind(data)

Binds data to correct fields, returning a new bound form object.

form.toHTML(iterator)

Runs toHTML on each field returning the result. If an iterator is specified, it is called for each field with the field name and object as its arguments, the iterator's results are concatenated to create the HTML output, allowing for highly customised markup.

Bound Form object

Contains the same methods as the unbound form, plus:

Attributes

• data - Object containing all the parsed data keyed by field name
• fields - Object literal containing the field objects passed to the create function

form.validate(callback)

Calls validate on each field in the bound form and returns the resulting form object to the callback.

form.isValid()

Checks all fields for an error attribute. Returns false if any exist, otherwise returns true.

form.toHTML(iterator)

Runs toHTML on each field returning the result. If an iterator is specified, it is called for each field with the field name and object as its arguments, the iterator's results are concatenated to create the HTML output, allowing for highly customised markup.

Field object

Attributes

• label - Optional label text which overrides the default
• required - Boolean describing whether the field is mandatory
• validators - An array of functions which validate the field data
• widget - A widget object to use when rendering the field
• id - An optional id to override the default
• choices - A list of options, used for multiple choice fields (see the field.choices section below)
• cssClasses - A list of CSS classes for label and field wrapper
• hideError - if true, errors won't be rendered automatically
• labelAfterField - if true, the label text will be displayed after the field, rather than before
• errorAfterField - if true, the error message will be displayed after the field, rather than before
• fieldsetClasses - for widgets with a fieldset (multipleRadio and multipleCheckbox), set classes for the fieldset
• legendClasses - for widgets with a fieldset (multipleRadio and multipleCheckbox), set classes for the fieldset's legend

field.choices

The choices property is used for radio, checkbox, and select fields. Two formats are supported and in case of select fields the format can be nested once to support option groups.

The first format is based on objects and is easy to write. Object keys are treated as values and object values are treated as labels. If the value is another object and nesting is supported by the widget the key will be used as label and the value as nested list.

The second format is array-based and therefore ordered (object keys are unordered by definition). The array should contain arrays with two values the first being the value and the second being the label. If the label is an array and nesting is supported by the widget the value will be used as label and the label as nested list.

Both formats are demonstrated below: