Form Example

Conditions

Here is an example of complex conditions and validation created using JSON Logic.

JSON

components: [
    {
      "type": "textfield",
      "label": "Type \"Show\"",
      "description": "Must be exact and case sensitive.",
      "key": "typeShow",
      "input": true,
      "inputType": "text",
      "validate": {
        "json": {
          "if": [
            {
              "==": [
                {
                  "var": "data.typeShow"
                },
                "Show"
              ]
            },
            true,
            "You must type 'Show'!"
          ]
        }
      }
    },
    {
      "type": "textfield",
      "label": "Type \"Me\"",
      "description": "Must be exact and case sensitive.",
      "key": "typeMe",
      "input": true,
      "inputType": "text",
      "validate": {
        "json": {
          "if": [
            {
              "==": [
                {
                  "var": "data.typeMe"
                },
                "Me"
              ]
            },
            true,
            "You must type 'Me'!"
          ]
        }
      },
      "conditional": {
        "json": {
          "===": [
            {
              "var": "data.typeShow"
            },
            "Show"
          ]
        }
      }
    },
    {
      "type": "textfield",
      "label": "Type \"The\"",
      "description": "Must be exact and case sensitive.",
      "key": "typeThe",
      "input": true,
      "inputType": "text",
      "validate": {
        "json": {
          "if": [
            {
              "==": [
                {
                  "var": "data.typeThe"
                },
                "The"
              ]
            },
            true,
            "You must type 'The'!"
          ]
        }
      },
      "conditional": {
        "json": {
          "===": [
            {
              "var": "data.typeMe"
            },
            "Me"
          ]
        }
      }
    },
    {
      "type": "textfield",
      "input": true,
      "inputType": "text",
      "label": "Type \"Monkey!\"",
      "description": "Don't forget the '!'.",
      "key": "typeMonkey",
      "validate": {
        "json": {
          "if": [
            {
              "==": [
                {
                  "var": "data.typeMonkey"
                },
                "Monkey!"
              ]
            },
            true,
            "You must type 'Monkey!'"
          ]
        }
      },
      "conditional": {
        "json": {
          "===": [
            {
              "var": "data.typeThe"
            },
            "The"
          ]
        }
      }
    },
    {
      "key": "monkey",
      "input": false,
      "tag": "img",
      "attrs": [
        {
          "attr": "src",
          "value": "https://ichef.bbci.co.uk/news/660/cpsprodpb/025B/production/_85730600_monkey2.jpg"
        },
        {
          "attr": "style",
          "value": "width: 100%;"
        }
      ],
      "className": "",
      "content": "",
      "type": "htmlelement",
      "conditional": {
        "json": {
          "===": [
            {
              "var": "data.typeMonkey"
            },
            "Monkey!"
          ]
        }
      }
    },
    {
      "key": "submit",
      "type": "button",
      "action": "submit",
      "label": "Submit",
      "theme": "primary"
    }
  ]

Calculated

Here is an example of complex calculated values based on the values of other fields created using JSON Logic.

JSON

components: [
    {
      type: 'number',
      label: 'A',
      key: 'a',
      input: true,
      inputType: 'text',
      multiple: true,
      prefix: '+',
      validate: {
        min: 2,
        max: 100,
        step: 1
      }
    },
    {
      type: 'htmlelement',
      tag: 'p',
      className: 'text-center',
      content: '———— X ————'
    },
    {
      type: 'number',
      label: 'B',
      key: 'b',
      input: true,
      inputType: 'text',
      multiple: true,
      prefix: '+',
      validate: {
        min: 2,
        max: 100,
        step: 1
      }
    },
    {
      type: 'textfield',
      label: 'Total',
      key: 'total',
      input: true,
      inputType: 'text',
      disabled: true,
      calculateValue: {
        "*": [
          {"_sum": {var: 'data.a'}},
          {"_sum": {var: 'data.b'}}
        ]
      }
    }
  ]