jube-fork/Jube.App/wwwroot/kendo/examples/form/validation.html

<!DOCTYPE html>
<html>
<head>
    <title>Validation</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content">
        <div id="validation-success"></div>

        <form id="exampleForm"></form>
    </div>

    <script>
        $(document).ready(function () {
            var validationSuccess = $("#validation-success");

            $("#exampleForm").kendoForm({
                validatable: {
                    validateOnBlur: true,
                    validationSummary: true,
                    errorTemplate: "<span class='k-form-error'>#:message#</span>"
                },
                formData: {
                    FirstName: "John",
                    LastName: "Doe",
                    Email: "[email protected]",
                    HireDate: new Date(2020, 0, 1),
                    RetireDate: new Date(2020, 0, 1)
                },
                items: [{
                    type: "group",
                    label: "Employee Information",
                    items: [
                        { field: "FirstName", label: "First Name:", validation: { required: { message: "Fill in LastName" } } },
                        { field: "LastName", label: "LastName:", validation: { required: { message: "Fill in LastName" } }, hint: "Hint: enter alphanumeric characters only." },
                        { field: "Email", label: "Email:", validation: { required: true, email: true } },
                        { field: "HireDate", label: { text: "Hire Date:" }, validation: { required: true }, },
                        {
                            field: "RetireDate",
                            label: { text: "Retire Date:" },
                            validation: {
                                required: true,
                                greaterdate: function (input) {
                                    if (input.is("[name='RetireDate']") && input.val() != "") {
                                        var date = kendo.parseDate(input.val()),
                                            hireDate = kendo.parseDate($("[name='HireDate']").val());
                                            input.attr("data-greaterdate-msg", "Retire Date should be after Hire Date");
                                        return hireDate == null || hireDate.getTime() < date.getTime();
                                    }

                                    return true;
                                }
                            }
                        }
                    ]
                }],
                validateField: function (e) {
                    validationSuccess.html("");
                },
                submit: function (e) {
                    e.preventDefault();
                    validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
                },
                clear: function (ev) {
                    validationSuccess.html("");
                }
            });
        });
    </script>
</div>

    
</body>
</html>