JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<script src="https://unpkg.com/[email protected]/dist/formio.full.min.js"></script>
<div id="myform">

</div>

JavaScript

const formDefinition = {
  components: 
  [
    {
      label: "Name",
      applyMaskOn: "change",
      tableView: true,
      validate: {
      	required: true,
        minLength: 2,
        maxLength: 5
      },
      key: "name",
      type: "textfield",
      input: true
    },
    {
      type: "button",
      showValidations: false,
      label: "Submit",
      key: "submit",
      input: true,
      tableView: false
    }
  ]
};

Formio.createForm(document.getElementById('myform'), 'formDefinition').then((form) => {
	form.on('error', (error) => {
  	alert('This is the "error" event handler.\n' + typeof(error));
  });
  
  form.on('submitError', (submitError) => {
  	alert('This is the "submitError" event handler.\n' + typeof(submitError));
  });
  
  form.on('submit', (submission) => {
  	alert('I submitted the form.');
  });
  
  throw new Error('My error, does it appear? Does it yearn?')
  
});