356 lines
12 KiB
PHP
356 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'JSON Schema Validator - Free Online JSON Schema Validation Tool')
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.2/dist/jsoneditor.min.css" rel="stylesheet">
|
|
<style>
|
|
.json-input {
|
|
min-height: 300px;
|
|
font-family: 'Courier New', monospace;
|
|
background-color: var(--bs-body-bg);
|
|
border: 1px solid var(--bs-border-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.json-input:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.25rem rgba(74, 107, 255, 0.25);
|
|
}
|
|
|
|
.result-box {
|
|
display: none;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.result-box.show {
|
|
display: block;
|
|
}
|
|
|
|
.tree-view-container {
|
|
height: 500px;
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.375rem;
|
|
margin-top: 1rem;
|
|
background-color: var(--bs-body-bg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-tabs {
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
color: var(--bs-body-color);
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
color: var(--primary-color);
|
|
border-bottom: 2px solid var(--primary-color);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
color: var(--primary-color);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.jsoneditor {
|
|
border: none !important;
|
|
}
|
|
|
|
.jsoneditor-menu {
|
|
background-color: var(--bs-body-bg) !important;
|
|
border-bottom: 1px solid var(--bs-border-color) !important;
|
|
}
|
|
|
|
.jsoneditor-navigation-bar {
|
|
background-color: var(--bs-body-bg) !important;
|
|
border-bottom: 1px solid var(--bs-border-color) !important;
|
|
}
|
|
|
|
.hero-section {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #6a8eff 100%);
|
|
color: white;
|
|
padding: 3rem 0;
|
|
margin-bottom: 2rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 2rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.feature-card {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
background-color: var(--bs-body-bg);
|
|
border: 1px solid var(--bs-border-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="hero-section text-center">
|
|
<h1 class="display-4 fw-bold mb-3">JSON Schema Validator</h1>
|
|
<p class="lead mb-4">Validate your JSON data against a JSON Schema</p>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-4 mb-3">
|
|
<div class="feature-card">
|
|
<i class="bi bi-file-earmark-check feature-icon"></i>
|
|
<h3>Schema Validation</h3>
|
|
<p>Validate your JSON data against a JSON Schema specification</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="feature-card">
|
|
<i class="bi bi-code-slash feature-icon"></i>
|
|
<h3>Interactive Editor</h3>
|
|
<p>Edit both JSON and Schema in a user-friendly interface</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="feature-card">
|
|
<i class="bi bi-lightning-charge feature-icon"></i>
|
|
<h3>Real-time Feedback</h3>
|
|
<p>Get instant validation results with detailed error messages</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="jsonInput" class="form-label">JSON Data:</label>
|
|
<textarea class="form-control json-input" id="jsonInput" rows="10" placeholder='{
|
|
"name": "John Doe",
|
|
"age": 30,
|
|
"email": "john@example.com"
|
|
}'></textarea>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="schemaInput" class="form-label">JSON Schema:</label>
|
|
<textarea class="form-control json-input" id="schemaInput" rows="10" placeholder='{
|
|
"type": "object",
|
|
"properties": {
|
|
"name": { "type": "string" },
|
|
"age": { "type": "number" },
|
|
"email": { "type": "string", "format": "email" }
|
|
},
|
|
"required": ["name", "age", "email"]
|
|
}'></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-primary" id="validateBtn">
|
|
<i class="bi bi-check-circle me-2"></i>Validate
|
|
</button>
|
|
<button class="btn btn-outline-secondary" id="clearBtn">
|
|
<i class="bi bi-trash me-2"></i>Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm mt-4 result-box" id="resultBox">
|
|
<div class="card-body">
|
|
<h3 class="h5 card-title">Validation Result</h3>
|
|
<div id="resultContent"></div>
|
|
|
|
<ul class="nav nav-tabs" id="viewTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="tree-tab" data-bs-toggle="tab" data-bs-target="#tree-view" type="button" role="tab">Tree View</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="raw-tab" data-bs-toggle="tab" data-bs-target="#raw-view" type="button" role="tab">Raw JSON</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="viewTabsContent">
|
|
<div class="tab-pane fade show active" id="tree-view" role="tabpanel">
|
|
<div class="tree-view-container" id="treeView"></div>
|
|
</div>
|
|
<div class="tab-pane fade" id="raw-view" role="tabpanel">
|
|
<pre class="tree-view-container" id="rawView"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<h2 class="h4 mb-3">About JSON Schema Validation</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>JSON Schema is a powerful tool for validating the structure of JSON data. It allows you to define the expected format, data types, and constraints for your JSON documents. Our JSON Schema Validator makes it easy to validate your JSON data against a schema specification.</p>
|
|
|
|
<h3 class="h5 mt-4">Key Features:</h3>
|
|
<ul>
|
|
<li>Validate JSON data against JSON Schema specifications</li>
|
|
<li>Interactive JSON and Schema editors</li>
|
|
<li>Detailed validation error messages</li>
|
|
<li>Tree view and raw JSON view options</li>
|
|
<li>Dark and light mode support</li>
|
|
</ul>
|
|
|
|
<h3 class="h5 mt-4">How to Use:</h3>
|
|
<ol>
|
|
<li>Enter or paste your JSON data in the left textarea</li>
|
|
<li>Enter or paste your JSON Schema in the right textarea</li>
|
|
<li>Click the "Validate" button to check if your JSON conforms to the schema</li>
|
|
<li>View the validation results and any error messages</li>
|
|
</ol>
|
|
|
|
<h3 class="h5 mt-4">Example Schema:</h3>
|
|
<pre class="bg-light p-3 rounded"><code>{
|
|
"type": "object",
|
|
"properties": {
|
|
"name": { "type": "string" },
|
|
"age": { "type": "number", "minimum": 0 },
|
|
"email": { "type": "string", "format": "email" }
|
|
},
|
|
"required": ["name", "age", "email"]
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.2/dist/jsoneditor.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/ajv@8.12.0/dist/ajv.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const validateBtn = document.getElementById('validateBtn');
|
|
const clearBtn = document.getElementById('clearBtn');
|
|
const jsonInput = document.getElementById('jsonInput');
|
|
const schemaInput = document.getElementById('schemaInput');
|
|
const resultBox = document.getElementById('resultBox');
|
|
const resultContent = document.getElementById('resultContent');
|
|
const treeView = document.getElementById('treeView');
|
|
const rawView = document.getElementById('rawView');
|
|
|
|
let editor = null;
|
|
const ajv = new Ajv();
|
|
|
|
function updateTreeView(json) {
|
|
// Clear previous editor
|
|
if (editor) {
|
|
editor.destroy();
|
|
}
|
|
|
|
// Create new editor
|
|
const options = {
|
|
mode: 'tree',
|
|
modes: ['tree', 'view', 'form', 'code', 'text'],
|
|
theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'ace/theme/monokai' : 'ace/theme/github',
|
|
onChange: function() {
|
|
try {
|
|
const updatedJson = editor.get();
|
|
jsonInput.value = JSON.stringify(updatedJson, null, 2);
|
|
rawView.textContent = JSON.stringify(updatedJson, null, 2);
|
|
} catch (e) {
|
|
console.error('Error updating JSON:', e);
|
|
}
|
|
}
|
|
};
|
|
|
|
editor = new JSONEditor(treeView, options);
|
|
editor.set(json);
|
|
|
|
// Update raw view
|
|
rawView.textContent = JSON.stringify(json, null, 2);
|
|
}
|
|
|
|
// Validate JSON against Schema
|
|
validateBtn.addEventListener('click', function() {
|
|
try {
|
|
const json = JSON.parse(jsonInput.value);
|
|
const schema = JSON.parse(schemaInput.value);
|
|
|
|
// Compile schema
|
|
const validate = ajv.compile(schema);
|
|
const valid = validate(json);
|
|
|
|
if (valid) {
|
|
resultContent.innerHTML = `
|
|
<div class="alert alert-success">
|
|
<i class="bi bi-check-circle-fill me-2"></i>
|
|
JSON data is valid according to the schema!
|
|
</div>
|
|
`;
|
|
resultBox.classList.add('show');
|
|
updateTreeView(json);
|
|
} else {
|
|
const errors = validate.errors.map(error => {
|
|
return `<li>${error.instancePath || 'root'}: ${error.message}</li>`;
|
|
}).join('');
|
|
|
|
resultContent.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<i class="bi bi-exclamation-circle-fill me-2"></i>
|
|
JSON data is invalid according to the schema:
|
|
<ul class="mt-2 mb-0">${errors}</ul>
|
|
</div>
|
|
`;
|
|
resultBox.classList.add('show');
|
|
if (editor) {
|
|
editor.destroy();
|
|
editor = null;
|
|
}
|
|
treeView.innerHTML = '';
|
|
rawView.textContent = '';
|
|
}
|
|
} catch (e) {
|
|
resultContent.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<i class="bi bi-exclamation-circle-fill me-2"></i>
|
|
Error: ${e.message}
|
|
</div>
|
|
`;
|
|
resultBox.classList.add('show');
|
|
if (editor) {
|
|
editor.destroy();
|
|
editor = null;
|
|
}
|
|
treeView.innerHTML = '';
|
|
rawView.textContent = '';
|
|
}
|
|
});
|
|
|
|
// Clear input
|
|
clearBtn.addEventListener('click', function() {
|
|
jsonInput.value = '';
|
|
schemaInput.value = '';
|
|
resultBox.classList.remove('show');
|
|
if (editor) {
|
|
editor.destroy();
|
|
editor = null;
|
|
}
|
|
treeView.innerHTML = '';
|
|
rawView.textContent = '';
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|