examples/browser/json_schema_validation.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>JSONEditor | JSON schema validation</title>

    <style>
      body {
        width: 600px;
        font: 11pt sans-serif;
      }
      #jsoneditor {
        width: 100%;
        height: 500px;
      }

      /* custom bold styling for non-default JSON schema values */
      .jsoneditor-is-not-default {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>JSON schema validation</h1>
    <p>
      This example demonstrates JSON schema validation. The JSON object in this example must contain
      properties like <code>firstName</code> and <code>lastName</code>, can can optionally have a
      property <code>age</code> which must be a positive integer.
    </p>
    <p>
      See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more
      information.
    </p>

    <div id="jsoneditor"></div>

    <script type="module">
      import { createJSONEditor, createAjvValidator } from '../../package-vanilla/standalone.js'

      const schema = {
        title: 'Employee',
        description: 'Object containing employee details',
        type: 'object',
        properties: {
          firstName: {
            title: 'First Name',
            description: 'The given name.',
            examples: ['John'],
            type: 'string'
          },
          lastName: {
            title: 'Last Name',
            description: 'The family name.',
            examples: ['Smith'],
            type: 'string'
          },
          gender: {
            title: 'Gender',
            enum: ['male', 'female']
          },
          availableToHire: {
            type: 'boolean',
            default: false
          },
          age: {
            description: 'Age in years',
            type: 'integer',
            minimum: 0,
            examples: [28, 32]
          },
          job: {
            $ref: 'job'
          }
        },
        required: ['firstName', 'lastName']
      }

      const schemaDefinitions = {
        job: {
          title: 'Job description',
          type: 'object',
          required: ['address'],
          properties: {
            company: {
              type: 'string',
              examples: ['ACME', 'Dexter Industries']
            },
            role: {
              description: 'Job title.',
              type: 'string',
              examples: ['Human Resources Coordinator', 'Software Developer'],
              default: 'Software Developer'
            },
            address: {
              type: 'string'
            },
            salary: {
              type: 'number',
              minimum: 120,
              examples: [100, 110, 120]
            }
          }
        }
      }

      const content = {
        json: {
          firstName: 'John',
          lastName: 'Doe',
          gender: null,
          age: '28',
          availableToHire: true,
          job: {
            company: 'freelance',
            role: 'developer',
            salary: 100
          }
        },
        text: undefined
      }

      // create the editor
      const target = document.getElementById('jsoneditor')
      const editor = createJSONEditor({
        target: document.getElementById('jsoneditor'),
        props: {
          content,
          onChange: (update) => console.log('onChange', update),
          validator: createAjvValidator({ schema, schemaDefinitions })
        }
      })
    </script>
  </body>
</html>