schemaGuard/index.html at main · utdevnp/schemaGuard · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schema Guard - Validate the payload against the schema</title>
    <style>
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .success {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body>
    <div class="container-fluid">
        <p class="text-center mt-3"> <i class="bi bi-journal-check text-success" style="font-size: 50px;"></i> <br>This tool validates JSON payloads against schemas using the powerful <a href="https://ajv.js.org/guide/getting-started.html" target="_blank">AJV</a> library. It supports complex, nested structures with detailed error reporting. Users can input payloads and schemas as objects or JSON strings, and all validation issues are displayed clearly in one go. Currently, it supports AJV-based validation only.</p>
        <h5 class="text-center mb-3">Validate the <span class="text-success">payload</span> against the <span class="text-primary">schema</span> </h5>
        <div class="row align-items-justify">
            <div class="col">
                <label for="payload" class="mb-2">Payload (JSON):</label>
                <textarea id="payload" class="form-control" rows="15" placeholder="Enter your payload here"></textarea>
            </div>
            <div class="col">
                <label for="schema" class="mb-2">Schema (JSON):</label>
                <textarea id="schema" class="form-control" rows="15"
                    placeholder="Enter your AJV JSON schema here"></textarea>
            </div>
        </div>
        <div class="col-12 mt-3 clearfix">
            <button id="validate" class="btn btn-primary">Validate <i class="bi bi-check2-circle"></i></button>
        </div>
        <div id="result" class="col-12">Result will be display here ...</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/ajv@6/dist/ajv.min.js"></script>
    <script src="./script/validator.js"></script>
</body>
</html>