-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvalidate.html
More file actions
266 lines (242 loc) · 14.3 KB
/
Copy pathvalidate.html
File metadata and controls
266 lines (242 loc) · 14.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Schema Validator — validate a payload against a schema online | JSON Studio</title>
<meta name="description" content="Validate JSON against a JSON Schema in your browser and get every failure with its instance path and the keyword that rejected it. Covers the keywords real-world schemas actually use. Free, no upload.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://jsonstudio.msdevbuild.com/validate.html">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#0078d4" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#12151c" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="JSON Studio">
<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
<meta property="og:type" content="website">
<meta property="og:title" content="JSON Schema Validator — validate a payload against a schema online">
<meta property="og:description" content="Validate JSON against a JSON Schema in your browser and get every failure with its instance path and the keyword that rejected it. Covers the keywords real-world schemas actually use. Free, no upload.">
<meta property="og:url" content="https://jsonstudio.msdevbuild.com/validate.html">
<meta property="og:image" content="https://jsonstudio.msdevbuild.com/assets/img/og-cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JSON Studio — every JSON tool, in your browser">
<meta property="og:site_name" content="JSON Studio by MSDEVBUILD">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://jsonstudio.msdevbuild.com/assets/img/og-cover.png">
<meta name="twitter:title" content="JSON Schema Validator — validate a payload against a schema online">
<meta name="twitter:description" content="Validate JSON against a JSON Schema in your browser and get every failure with its instance path and the keyword that rejected it. Covers the keywords real-world schemas actually use. Free, no upload.">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/convert.css">
<link rel="stylesheet" href="assets/css/present.css">
<link rel="stylesheet" href="assets/css/workbench.css">
<link rel="stylesheet" href="assets/css/tool-focus.css">
<link rel="stylesheet" href="assets/css/editor.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "JSON Schema validator — JSON Studio",
"url": "https://jsonstudio.msdevbuild.com/validate.html",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Any (runs in browser)",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"creator": { "@type": "Person", "name": "Suthahar Jegatheesan", "url": "https://www.msdevbuild.com/" },
"description": "Validate a JSON document against a JSON Schema in your browser and get a clear list of errors with the exact failing path. Free and client-side."
}
</script>
<script>(function(){try{var t=localStorage.getItem('json-studio-theme');if(!t&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)t='dark';if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "JSON Studio", "item": "https://jsonstudio.msdevbuild.com/" },
{ "@type": "ListItem", "position": 2, "name": "Tools", "item": "https://jsonstudio.msdevbuild.com/tools.html" },
{ "@type": "ListItem", "position": 3, "name": "Schema validator", "item": "https://jsonstudio.msdevbuild.com/validate.html" }
]
},
{
"@type": "FAQPage",
"mainEntity": [
{ "@type": "Question", "name": "Which keywords are supported?", "acceptedAnswer": { "@type": "Answer", "text": "Types, required, enum, const, minimum/maximum and their exclusive forms, multipleOf, minLength/maxLength/pattern, format, items and prefixItems, minItems/maxItems/uniqueItems/contains, properties, patternProperties, additionalProperties, minProperties/maxProperties, dependentRequired, allOf/anyOf/oneOf/not, and $ref to local pointers." } },
{ "@type": "Question", "name": "Is it a complete draft implementation?", "acceptedAnswer": { "@type": "Answer", "text": "No, and it says so. Dynamic references, content encoding and the more exotic corners of the specification are not implemented. For everyday API schemas it will tell you what is wrong." } },
{ "@type": "Question", "name": "Why is a valid-looking email rejected?", "acceptedAnswer": { "@type": "Answer", "text": "Format checking is on by default. The email, uri, uuid, date-time, date, time, ipv4 and hostname formats are checked against patterns; switch off \"Enforce formats\" to treat them as annotations, which is what the specification does by default." } }
]
},
{
"@type": "HowTo",
"name": "How to use the Schema validator",
"step": [
{ "@type": "HowToStep", "position": 1, "text": "Paste the JSON document into the first pane." },
{ "@type": "HowToStep", "position": 2, "text": "Paste the JSON Schema into the second." },
{ "@type": "HowToStep", "position": 3, "text": "Read the errors, each with its instance path. Switch off format checking if you only want structural validation." }
]
}
]
}
</script>
</head>
<body>
<div id="site-header"></div>
<span id="top"></span>
<main class="convert-shell">
<div class="convert-head">
<div class="container tool-topbar">
<h1>JSON Schema validator</h1>
<p class="tt-sub">Check a payload against a schema — every failure with its instance path.</p>
<a class="tt-about" href="#about">About & FAQ ↓</a>
</div>
<div class="container">
<div class="opt-bar">
<div class="opt">
<input type="checkbox" id="opt-formats" checked>
<label for="opt-formats" style="cursor:pointer;">Enforce formats</label>
</div>
<div class="opt">
<input type="checkbox" id="opt-all" checked>
<label for="opt-all" style="cursor:pointer;">Report all errors</label>
</div>
</div>
</div>
</div>
<div class="convert-grid three">
<section class="pane">
<div class="pane-head">
<div class="pane-title">JSON data</div>
<button id="btn-sample">Load sample</button>
<button id="btn-clear">Clear</button>
</div>
<div class="pane-body">
<textarea id="input" class="code-area" spellcheck="false" placeholder="{ "id": 1 }"></textarea>
</div>
<div class="pane-status" id="in-status">Waiting for input.</div>
</section>
<section class="pane">
<div class="pane-head">
<div class="pane-title">JSON Schema</div>
<button id="btn-upload">Upload</button>
<input type="file" id="file-input" accept=".json,application/json" style="display:none;">
</div>
<div class="pane-body">
<textarea id="input-schema" class="code-area" spellcheck="false" placeholder="{ "type": "object" }"></textarea>
</div>
<div class="pane-status" id="schema-status"></div>
</section>
<section class="pane">
<div class="pane-head">
<div class="pane-title">Validation result</div>
<button class="primary" id="btn-run">Validate</button>
<button id="btn-copy">Copy</button>
</div>
<div class="pane-body">
<textarea id="output" class="code-area" spellcheck="false" readonly placeholder="Errors appear here."></textarea>
<p class="note">Covers the keywords you actually meet day to day (types, required, enum, const, numeric and string bounds, items, uniqueItems, anyOf/oneOf/allOf/not, $ref to local pointers). Exotic draft corners like dynamic refs and content encoding are not implemented.</p>
</div>
<div class="pane-status" id="out-status"></div>
</section>
</div>
</main>
<section class="tool-home" id="about">
<div class="container">
<div class="th-more">Reference</div>
<header class="th-head">
<div class="kicker">Schema validator</div>
<h2>About the JSON Schema validator</h2>
<p>Paste a payload and a schema and get a precise list of what fails, each error naming the exact path inside the document and the keyword that rejected it — the two things you need to fix it. It pairs with the schema generator: infer a schema from one payload, then test it against the awkward ones.</p>
<div class="cta-row">
<a class="btn-primary" href="#top">Use the tool ↑</a>
<a class="btn-secondary btn-present" href="presentation.html"><svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M12 17v3M9.5 20h5"/><path d="m10.6 8.8 4 2.7-4 2.7z" fill="currentColor" stroke="none"/></svg> Present it</a>
</div>
</header>
<div class="th-features">
<div class="th-feature">
<div class="fi">01</div>
<h3>Errors with paths</h3>
<p>Every failure names the instance path and the keyword that rejected it — the two things you need.</p>
</div>
<div class="th-feature">
<div class="fi">02</div>
<h3>The keywords you meet</h3>
<p>Types, required, enum, const, bounds, items, uniqueItems, combinators, patternProperties and local $ref.</p>
</div>
<div class="th-feature">
<div class="fi">03</div>
<h3>All errors or the first</h3>
<p>See everything that is wrong at once, or stop at the first failure while iterating.</p>
</div>
<div class="th-feature">
<div class="fi">04</div>
<h3>Format checking, optional</h3>
<p>Enforce email, uri, uuid and date formats, or treat them as annotations like the spec does.</p>
</div>
</div>
<div class="seo-grid">
<div class="seo-main">
<h3 id="how">How to use it</h3>
<ol class="seo-steps">
<li>Paste the JSON document into the first pane.</li>
<li>Paste the JSON Schema into the second.</li>
<li>Read the errors, each with its instance path. Switch off format checking if you only want structural validation.</li>
</ol>
<h3 id="faq">Questions</h3>
<div class="faq">
<details>
<summary>Which keywords are supported?</summary>
<div class="faq-body"><p>Types, required, enum, const, minimum/maximum and their exclusive forms, multipleOf, minLength/maxLength/pattern, format, items and prefixItems, minItems/maxItems/uniqueItems/contains, properties, patternProperties, additionalProperties, minProperties/maxProperties, dependentRequired, allOf/anyOf/oneOf/not, and $ref to local pointers.</p></div>
</details>
<details>
<summary>Is it a complete draft implementation?</summary>
<div class="faq-body"><p>No, and it says so. Dynamic references, content encoding and the more exotic corners of the specification are not implemented. For everyday API schemas it will tell you what is wrong.</p></div>
</details>
<details>
<summary>Why is a valid-looking email rejected?</summary>
<div class="faq-body"><p>Format checking is on by default. The email, uri, uuid, date-time, date, time, ipv4 and hostname formats are checked against patterns; switch off "Enforce formats" to treat them as annotations, which is what the specification does by default.</p></div>
</details>
</div>
</div>
<aside class="seo-side">
<div class="seo-card" id="share">
<h3>Share this tool</h3>
<p>Send it to a colleague — the link only, never anything you have pasted in.</p>
<div data-share data-share-title="Schema validator — JSON Studio"></div>
</div>
<div class="seo-card">
<h3 class="with-ico"><svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M12 17v3M9.5 20h5"/><path d="m10.6 8.8 4 2.7-4 2.7z" fill="currentColor" stroke="none"/></svg> Present this tool</h3>
<p>Demoing to a client or a class? Press <kbd>Shift</kbd><kbd>P</kbd> for full-screen presentation mode — chrome hidden, type scaled up, laser pointer included.</p>
<a class="seo-link" href="presentation.html">How presentation mode works →</a>
</div>
<div class="seo-card">
<h3>Related tools</h3>
<ul class="seo-related">
<li><a href="json-schema.html"><span class="ri">Sχ</span>Schema generator</a></li>
<li><a href="mock.html"><span class="ri">⁂</span>Mock data generator</a></li>
<li><a href="diff.html"><span class="ri">A|B</span>JSON diff</a></li>
</ul>
<a class="seo-link" href="tools.html">All 14 tools →</a>
</div>
<div class="seo-card quiet">
<h3>Private by construction</h3>
<p>No backend exists. Everything on this page runs in your browser, so nothing you paste is uploaded, logged or retained.</p>
<a class="seo-link" href="privacy.html">Read the privacy policy →</a>
</div>
</aside>
</div>
</div>
</section>
<div id="site-footer"></div>
<script src="assets/js/site.js"></script>
<script src="assets/js/payload-link.js"></script>
<script src="assets/js/tool-kit.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/present.js"></script>
<script src="assets/js/workbench.js"></script>
<script src="assets/js/history.js"></script>
<script src="assets/js/gutter.js"></script>
<script src="assets/js/editor.js"></script>
<script src="assets/js/share.js"></script>
</body>
</html>