StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
jsoneditor/examples/07_json_schema_validation.html

139 lines
3.0 KiB
HTML
Raw Permalink Normal View History

Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
<!DOCTYPE HTML>
Defined charset="utf-8" and lang="en" in all examples
2020-09-23 16:23:38 +08:00
<html lang="en">
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
<head>
Defined charset="utf-8" and lang="en" in all examples
2020-09-23 16:23:38 +08:00
<meta charset="utf-8">
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
<title>JSONEditor | JSON schema validation</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
Update history. Fix JSON schema default value styling not working for `false` and `null`, and fixed the styling not updating when clicking a boolean checkbox (See #666)
2019-03-17 22:56:29 +08:00
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
</style>
</head>
<body>
<h1>JSON schema validation</h1>
<p>
Update history. Fix JSON schema default value styling not working for `false` and `null`, and fixed the styling not updating when clicking a boolean checkbox (See #666)
2019-03-17 22:56:29 +08:00
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.
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
</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>
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
const schema = {
Use JSON schema title as name for the root object if defined (see #635)
2019-06-12 21:43:16 +08:00
"title": "Employee",
"description": "Object containing employee details",
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
"type": "object",
"properties": {
"firstName": {
Display schema defaults inline next to Nodes (#666) * Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling
2019-03-17 22:39:00 +08:00
"title": "First Name",
"description": "The given name.",
"examples": [
"John"
],
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
"type": "string"
},
"lastName": {
Display schema defaults inline next to Nodes (#666) * Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling
2019-03-17 22:39:00 +08:00
"title": "Last Name",
"description": "The family name.",
"examples": [
"Smith"
],
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
"type": "string"
},
Improved error messaging for enums
2016-01-15 04:10:30 +08:00
"gender": {
Display schema defaults inline next to Nodes (#666) * Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling
2019-03-17 22:39:00 +08:00
"title": "Gender",
Improved error messaging for enums
2016-01-15 04:10:30 +08:00
"enum": ["male", "female"]
},
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
"availableToHire": {
Display schema defaults inline next to Nodes (#666) * Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling
2019-03-17 22:39:00 +08:00
"type": "boolean",
"default": false
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
},
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
"age": {
"description": "Age in years",
"type": "integer",
Add reproduction for schema ref examples bug
2019-03-14 00:43:31 +08:00
"minimum": 0,
"examples": [28, 32]
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
},
"job": {
"$ref": "job"
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
}
},
"required": ["firstName", "lastName"]
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
}
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
const job = {
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
"title": "Job description",
"type": "object",
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
"required": ["address"],
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
"properties": {
"company": {
Display schema defaults inline next to Nodes (#666) * Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling
2019-03-17 22:39:00 +08:00
"type": "string",
"examples": [
"ACME",
"Dexter Industries"
]
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
},
"role": {
Display schema defaults inline next to Nodes (#666) * Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling
2019-03-17 22:39:00 +08:00
"description": "Job title.",
"type": "string",
"examples": [
"Human Resources Coordinator",
"Software Developer"
Update history. Fix JSON schema default value styling not working for `false` and `null`, and fixed the styling not updating when clicking a boolean checkbox (See #666)
2019-03-17 22:56:29 +08:00
],
"default": "Software Developer"
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
},
"address": {
"type": "string"
},
"salary": {
"type": "number",
Add reproduction for schema ref examples bug
2019-03-14 00:43:31 +08:00
"minimum": 120,
"examples": [100, 110, 120]
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
}
}
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
}
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
const json = {
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
firstName: 'John',
lastName: 'Doe',
Improved error messaging for enums
2016-01-15 04:10:30 +08:00
gender: null,
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
age: "28",
Update history. Fix JSON schema default value styling not working for `false` and `null`, and fixed the styling not updating when clicking a boolean checkbox (See #666)
2019-03-17 22:56:29 +08:00
availableToHire: true,
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
job: {
company: 'freelance',
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
role: 'developer',
salary: 100
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
}
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
}
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
const options = {
add support for json schema references ($ref)
2017-07-05 05:28:28 +08:00
schema: schema,
Show validation errors inline in code mode (#560) * util.getPositionForPath * utils.getPositionForPath - allow multiple paths * code mode - show validation errors on gutter * show all validation errors with scroll indication on text mode * import json-source-map in favor of getting validation errors location * revert dist change * add statusbar indication for validation errors * reset valodation errors indication + code clean * change display indication for validationErrorIndication * extend schema validatin example with additional errors to demonstrate recent changes * minor css change
2018-08-12 18:41:02 +08:00
schemaRefs: {"job": job},
mode: 'tree',
Implement validation in mode `"preview"`
2019-07-24 19:30:44 +08:00
modes: ['code', 'text', 'tree', 'preview']
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
}
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
// create the editor
Rewrite code styling of browser examples
2019-08-29 21:45:32 +08:00
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
Updated readme, docs, added example
2016-01-12 19:40:23 +08:00
</script>
</body>
</html>