jube-fork/Jube.App/wwwroot/kendo/examples/wizard/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Overview</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" style="width:700px">
        <form id="wizard" style="width:500px; margin: 0 auto;" novalidate></form>
    </div>
    <script>

        var countries = [
            "France",
            "Germany",
            "Italy",
            "Netherlands",
            "Norway",
            "Spain"
        ];

        $("#wizard").kendoWizard({
            pager: true,
            done: function (e) {
                e.originalEvent.preventDefault();
                kendo.alert("Thank you for registering! Registration details will be sent to your email.");
            },
            steps: [
                {
                    title: "Account Details",
                    buttons: ["next"],
                    form: {
                        orientation: "vertical",
                        formData: {
                            Username: "johny",
                            Email: "[email protected]",
                            Password: "pass123",
                        },
                        items: [
                            { field: "Username", label: "Username:", validation: { required: true } },
                            { field: "Email", label: "Email:", validation: { required: true, email: true } },
                            { field: "Password", label: "Password:", validation: { required: true }, hint: "Hint: enter alphanumeric characters only.", attributes: { type: "password" } }
                        ]
                    }
                },
                {
                    title: "Personal Details",
                    buttons: ["previous", "next"],
                    form: {
                        orientation: "vertical",
                        items: [
                            { field: "FullName", label: "Full Name:", validation: { required: true } },
                            {
                                field: "Country", label: "Country:", validation: { required: true }, editor: "AutoComplete",
                                editorOptions: {
                                    dataSource: countries,
                                    filter: "startswith",
                                    placeholder: "Select country..."
                                }
                            },
                            {
                                field: "Gender",
                                label: "Gender:",
                                validation: { required: true },
                                editor: "RadioGroup",
                                editorOptions: {
                                    items: ["Female", "Male", "Other"],
                                    layout: "horizontal",
                                    labelPosition: "before"
                                }
                            },
                            { field: "About", label: { text: "About:", optional: true } }
                        ]
                    }
                },
                {
                    title: "Payment Details",
                    buttons: ["previous", "done"],
                    form: {
                        orientation: "vertical",
                        items: [{
                            type: "group",
                            label: "Payment Details:",
                            layout: "grid",
                            grid: { cols: 3, gutter: 10 },
                            items: [
                                {
                                    field: "PaymentType",
                                    label: "Payment Type:",
                                    validation: {
                                        required: true,
                                        payment: function (input) {
                                            if (input.is("[name='PaymentType']") && input.attr("required")) {
                                                input.attr("data-payment-msg", "Payment Type is required");

                                                return input.parents('[data-role="form"]').find("[type=radio][name=" + input.attr("name") + "]").is(":checked");
                                            }

                                            return true;
                                        }
                                    },
                                    editor: paymentEditor,
                                    colSpan: 3
                                },
                                {
                                    field: "CardNumber",
                                    label: "Card Number:",
                                    attributes: { "data-validmaskNumber-Msg": "Card number is incomplete" },
                                    validation: {
                                        required: true,
                                        validmaskNumber: function (input) {
                                            if (input.is("[name='CardNumber']") && input.val() != "") {
                                                var maskedtextbox = input.data("kendoMaskedTextBox");
                                                return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                                            }

                                            return true;
                                        }
                                    },
                                    editor: "MaskedTextBox",
                                    editorOptions: { mask: "0000-0000-0000-0000" },
                                    colSpan: 2
                                },
                                {
                                    field: "CSVNumber",
                                    label: "CSV Number:",
                                    attributes: { "data-validmaskCSV-Msg": "CSV code is incomplete" },
                                    validation: {
                                        required: true,
                                        validmaskCSV: function (input) {
                                            if (input.is("[name='CSVNumber']") && input.val() != "") {
                                                var maskedtextbox = input.data("kendoMaskedTextBox");
                                                return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                                            }

                                            return true;
                                        }
                                    },
                                    editor: "MaskedTextBox",
                                    editorOptions: { mask: "000" },
                                    colSpan: 1,
                                    hint: "The last 3 digids on the back"
                                },
                                {
                                    field: "ExpirationDate",
                                    label: "Expiration Date:",
                                    validation: {
                                        required: true,
                                    },
                                    editor: "DateInput",
                                    editorOptions: {
                                        format: "MM/yyyy"
                                    },
                                    colSpan: 3
                                },
                                {
                                    field: "CardHolderName",
                                    label: "Card Holder Name:",
                                    validation: {
                                        required: true
                                    },
                                    colSpan: 3
                                },
                            ]
                        }]
                    }
                }]
        });       

        function paymentEditor(container, item) {
            container.append($(
                '<div class="payment-type">' +
                    '<ul class="k-radio-list k-list-horizontal justify-payment" >' +
                        '<li class="k-radio-item">' +
                            '<input type="radio" id="visa" name="' + item.field + '" value="Visa" class="k-radio" required />' +
                            '<label class="card visa" for="visa" tabindex="0"></label>' +
                        '</li>' +
                        '<li class="k-radio-item">' +
                            '<input type="radio" id="mastercard" name="' + item.field + '" value="MasterCard" class="k-radio" required />' +
                            '<label class="card mastercard" for="mastercard"  tabindex="0"></label>' +
                        '</li>' +
                        '<li class="k-radio-item">' +
                            '<input type="radio" id="paypal" name="' + item.field + '" value="PayPal" class="k-radio" required />' +
                            '<label class="card paypal" for="paypal" tabindex="0">' +
                        '</li>' +
                    '</ul>' +
                '</div>' +
                '<span class="k-invalid-msg" data-for="' + item.field + '"></span>'
            ));
        }

    </script>

    <style>
        .payment-type input {
            visibility: hidden;
            position: absolute;
        }

        .justify-payment {
            display:flex;
            justify-content: space-between;
        }

        .card {
            cursor: pointer;
            background-size: auto;
            background-repeat: no-repeat;
            background-position: center;
            display: inline-block;
            width: 135px;
            height: 70px;
            border: 1px solid;
            filter: brightness(1.8) grayscale(1) opacity(.7);
            margin: 2px;
        }

        .card:hover {
            filter: brightness(1.2) grayscale(.5) opacity(.9);
        }

        .card:focus {
            box-shadow: 0 0 0 2px #d5d5d5;
	        outline: none;
        }

        .visa {
            background-image: url(https://image.flaticon.com/icons/svg/196/196578.svg);
        }

        .mastercard {
            background-image: url(https://image.flaticon.com/icons/svg/196/196561.svg);
        }

        .paypal {
            background-image: url(https://image.flaticon.com/icons/svg/196/196565.svg);
        }

        .payment-type input:active + .card {
            opacity: .9;
        }

        .payment-type input:checked + .card {
            filter: none;
        }
    </style>
</div>


    
</body>
</html>