Validate JSON String With TextArea and Validator

Environment

Product Version	2021.3.1207
Product	Progress® Kendo UI® TextArea for jQuery

Description

How can I validate a JSON string inside a Kendo UI TextArea?

Solution

1. Create a form element and place the textarea and button elements inside it.
2. Initialize a Kendo Validator on the form element.
3. Create a custom validation rule. Perform a check to determine if the JSON inside the form is valid or not.
4. Define an error message for the custom rule.

<h3>The following example is in VALID json format, you can copy and paste it in the textarea to test it.</h3>
<p>{
    "glossary": {
    "title": "example glossary",
    "GlossDiv": {
    "title": "S",
    "GlossList": {
    "GlossEntry": {
    "ID": "SGML",
    "SortAs": "SGML",
    "GlossTerm": "Standard Generalized Markup Language",
    "Acronym": "SGML",
    "Abbrev": "ISO 8879:1986",
    "GlossDef": {
    "para": "A meta-markup language, used to create markup languages such as DocBook.",
    "GlossSeeAlso": ["GML", "XML"]
    },
    "GlossSee": "markup"
    }
    }
    }
    }
    }</p>
<h3>The following example is in INVALID json format, you can copy and paste it in the textarea to test it.</h3>
<p>{
    "glossary": {
    "title": "example glossary",
    "GlossDiv": {
    "title": "S",
    "GlossList": {
    "GlossEntry": {
    "ID": "SGML",
    "SortAs": "SGML",
    "GlossTerm": "Standard Generalized Markup Language",
    "Acronym": "SGML",
    "Abbrev": "ISO 8879:1986",
    "GlossDef": {
    "para": "A meta-markup language, used to create markup languages such as DocBook.",
    "GlossSeeAlso": ["GML", "XML"]
    },
    "GlossSee": "markup"

    }
    }
    }
    }</p>
<form id="jsonForm">
    <h4>JSON:</h4>
    <textarea id="json-text-area" style="width: 100%;"></textarea>
    <div class="k-form-footer">
        <button class="k-button k-primary">Send</button>
    </div>
</form>
</div>

<script>
    $(document).ready(function () {
        // create TextArea from input HTML element
        $("#json-text-area").kendoTextArea({
            rows: 10
        });

        // Initialize the Validator.
        $("#jsonForm").kendoValidator({
            validateOnBlur: false,
            rules: {
                // Add a custom rule.
                jsonRule: function (input) {
                    if (input.is("#json-text-area")) {
                        return validateJson(input.val());
                    }
                }
            },
            messages: {
                // Error message if the validation does not pass.
                jsonRule: "The JSON is invalid."
            }
        });

        // Submit the form if all validations have passed.
        $("form").submit(function (event) {
            event.preventDefault();
            kendo.alert("VALID JSON!")
        });
    });

    function validateJson(json) {
        // Try to parse the JSON.
        try {
            JSON.parse(json);
            // If the parsing is successful, the validation passes.
            return true;
        } catch {
            // If the parsing fails, the error message will be displayed.
            return false;
        }
    }
</script>