VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
  <p>
  By accessing the signature pad component instance's underlying `signaturePad` instance (available in all JavaScript interpolation) in a custom validation, you can execute signature complexity validation by checking for a certain number of 
  </p>
    <div id="formio"></div>
  </div>
</div>

JavaScript

const form = {
  display: "form",
  components: [{
      label: "First Name",
      placeholder: "Enter your first name",
      description: "Please enter your first name",
      tableView: true,
      key: "firstName",
      type: "textfield",
      input: true,
      display: {
        error: false,
        focus: false,
      },
    },
    {
      label: "Last Name",
      placeholder: "Enter your last name",
      description: "Enter your last name here",
      tableView: true,
      key: "lastName",
      type: "textfield",
      validate: {
        required: true
      },
      input: true,
      display: {
        error: false,
        focus: false,
      },
    },
    {
      "tabindex": "6",
      "conditional": {
        "eq": "",
        "when": null,
        "show": ""
      },
      "tags": [],
      "input": true,
      "label": "Submit",
      "tableView": false,
      "key": "submit",
      "size": "md",
      "leftIcon": "",
      "rightIcon": "",
      "block": false,
      "action": "submit",
      "disableOnInvalid": false,
      "theme": "primary",
      "type": "button",
      "placeholder": "",
      "prefix": "",
      "customClass": "",
      "suffix": "",
      "multiple": false,
      "defaultValue": null,
      "protected": false,
      "unique": false,
      "persistent": false,
      "hidden": false,
      "clearOnHide": true,
      "refreshOn": "",
      "redrawOn": "",
      "modalEdit": false,
      "dataGridLabel": true,
      "labelPosition": "top",
      "description": "",
      "errorLabel": "",
      "tooltip": "",
      "hideLabel": false,
      "disabled": false,
      "autofocus": false,
      "dbIndex": false,
      "customDefaultValue": "",
      "calculateValue": "",
      "calculateServer": false,
      "widget": {
        "type": "input"
      },
      "attributes": {},
      "validateOn": "change",
      "validate": {
        "required": false,
        "custom": "",
        "customPrivate": false,
       ...