2018-08-15 18:21:27 +08:00
|
|
|
<!DOCTYPE HTML>
|
2020-09-23 16:23:38 +08:00
|
|
|
<html lang="en">
|
2018-08-15 18:21:27 +08:00
|
|
|
<head>
|
2020-09-23 16:23:38 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
2018-08-15 18:21:27 +08:00
|
|
|
<title>JSONEditor | Custom validation (asynchronous)</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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Asynchronous custom validation</h1>
|
|
|
|
|
<p>
|
|
|
|
|
This example demonstrates how to run asynchronous custom validation on a JSON object.
|
|
|
|
|
The names are checked asynchronously and the results "come in" half a second later.
|
|
|
|
|
Known names in this example are 'Joe', 'Harry', 'Megan'. For other names, a validation error will be displayed.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div id="jsoneditor"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2019-08-29 21:45:32 +08:00
|
|
|
const json = {
|
2018-08-15 18:21:27 +08:00
|
|
|
customers: [
|
|
|
|
|
{name: 'Joe'},
|
|
|
|
|
{name: 'Sarah'},
|
|
|
|
|
{name: 'Harry'},
|
|
|
|
|
]
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2018-08-15 18:21:27 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const options = {
|
2018-08-15 18:21:27 +08:00
|
|
|
mode: 'tree',
|
2019-07-24 19:30:44 +08:00
|
|
|
modes: ['code', 'text', 'tree', 'preview'],
|
2018-08-15 18:21:27 +08:00
|
|
|
onValidate: function (json) {
|
|
|
|
|
// in this validation function we fake sending a request to a server
|
|
|
|
|
// to validate the existence of customers
|
|
|
|
|
if (json && Array.isArray(json.customers)) {
|
|
|
|
|
return Promise
|
|
|
|
|
.all(json.customers.map(function (customer, index) {
|
|
|
|
|
return isExistingCustomer(customer && customer.name).then(function (exists) {
|
|
|
|
|
if (!exists) {
|
|
|
|
|
return {
|
|
|
|
|
path: ['customers', index],
|
|
|
|
|
message: 'Customer ' + customer.name + ' doesn\'t exist in our database'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
2019-08-29 21:45:32 +08:00
|
|
|
return null
|
2018-08-15 18:21:27 +08:00
|
|
|
}
|
2019-08-29 21:45:32 +08:00
|
|
|
})
|
2018-08-15 18:21:27 +08:00
|
|
|
}))
|
|
|
|
|
.then(function (errors) {
|
|
|
|
|
return errors.filter(function (error) {
|
2019-08-29 21:45:32 +08:00
|
|
|
return error != null
|
2018-08-15 18:21:27 +08:00
|
|
|
})
|
2019-08-29 21:45:32 +08:00
|
|
|
})
|
2018-08-15 18:21:27 +08:00
|
|
|
}
|
|
|
|
|
else {
|
2019-08-29 21:45:32 +08:00
|
|
|
return null
|
2018-08-15 18:21:27 +08:00
|
|
|
}
|
|
|
|
|
}
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2018-08-15 18:21:27 +08:00
|
|
|
|
|
|
|
|
// create the editor
|
2019-08-29 21:45:32 +08:00
|
|
|
const container = document.getElementById('jsoneditor')
|
|
|
|
|
const editor = new JSONEditor(container, options, json)
|
|
|
|
|
editor.expandAll()
|
2018-08-15 18:21:27 +08:00
|
|
|
|
|
|
|
|
// this function fakes a request (asynchronous) to a server to validate the existence of a customer
|
|
|
|
|
function isExistingCustomer (customerName) {
|
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
|
|
|
setTimeout(function () {
|
2019-08-29 21:45:32 +08:00
|
|
|
const customers = ['Joe', 'Harry', 'Megan']
|
|
|
|
|
const exists = customers.indexOf(customerName) !== -1
|
|
|
|
|
resolve(exists)
|
|
|
|
|
}, 500)
|
2018-08-15 18:21:27 +08:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
