jsonforms with Bootstrap: VerticalLayout missing

Question

I'm trying to use jsonform in my ASP.NET Core application. It is working quite well. I can't understand why I have this error

Uncaught Error: The JSONForm contains an element whose type is unknown: "VerticalLayout" at formTree.buildFromLayout (jsonform.js:3300)

@{
    ViewData["Title"] = "Home Page";
}

<div id="test3"></div>

@section Scripts {
    <script src="~/lib/underscore.js/underscore.js"></script>
    <script src="~/lib/jsonform/jsonform.js"></script>
    <script type="text/javascript">
        $('#test3').jsonForm({
            "schema": {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string"
                    },
                    "dead": {
                        "type": "boolean"
                    },
                    "kindOfDead": {
                        "type": "string",
                        "enum": [
                            "Zombie",
                            "Vampire",
                            "Ghoul"
                        ]
                    },
                    "vegetables": {
                        "type": "boolean"
                    },
                    "kindOfVegetables": {
                        "type": "string",
                        "enum": [
                            "All",
                            "Some",
                            "Only potatoes"
                        ]
                    }
                }
            },
            "form": [
                {
                    "type": "VerticalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "label": "Name",
                            "scope": "#/properties/name"
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Is Dead?",
                                    "scope": "#/properties/dead"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of dead",
                                    "scope": "#/properties/kindOfDead",
                                    "rule": {
                                        "effect": "ENABLE",
                                        "condition": {
                                            "scope": "#/properties/dead",
                                            "schema": {
                                                "const": true
                                            }
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Eats vegetables?",
                                    "scope": "#/properties/vegetables"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of vegetables",
                                    "scope": "#/properties/kindOfVegetables",
                                    "rule": {
                                        "effect": "HIDE",
                                        "condition": {
                                            "scope": "#/properties/vegetables",
                                            "schema": {
                                                "const": false
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        });
    </script>
}

Also, if I press the button to submit the form, the validation doesn't seem to work. I expected to see a popup on the ProjectTitle field.

Answer 1

When you configure the jsonForm, change form to elements, after modified, the code as below:

        $('#test').jsonForm({
            "schema": {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string"
                    },
                    "dead": {
                        "type": "boolean"
                    },
                    "kindOfDead": {
                        "type": "string",
                        "enum": [
                            "Zombie",
                            "Vampire",
                            "Ghoul"
                        ]
                    },
                    "vegetables": {
                        "type": "boolean"
                    },
                    "kindOfVegetables": {
                        "type": "string",
                        "enum": [
                            "All",
                            "Some",
                            "Only potatoes"
                        ]
                    }
                }
            },
            "elements": [
                {
                    "type": "VerticalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "label": "Name",
                            "scope": "#/properties/name"
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Is Dead?",
                                    "scope": "#/properties/dead"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of dead",
                                    "scope": "#/properties/kindOfDead",
                                    "rule": {
                                        "effect": "ENABLE",
                                        "condition": {
                                            "scope": "#/properties/dead",
                                            "schema": {
                                                "const": true
                                            }
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Eats vegetables?",
                                    "scope": "#/properties/vegetables"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of vegetables",
                                    "scope": "#/properties/kindOfVegetables",
                                    "rule": {
                                        "effect": "HIDE",
                                        "condition": {
                                            "scope": "#/properties/vegetables",
                                            "schema": {
                                                "const": false
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        });

If you want to submit form, try to change the <div> tag to <form> tag.

 <form id="test"></form>

Then, using above JQuery script to populate the content, the result like this: