jube-fork/Jube.App/wwwroot/kendo/examples/maskedtextbox/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">
                <form id="employeeForm" data-role="validator" novalidate="novalidate">
                    <ul id="fieldlist">
                        <li>
                            <label for="FirstName">First Name:</label>
                            <input type="text" class="k-textbox" name="FirstName" id="FirstName" required="required" />
                        </li>
                        <li>
                            <label for="LastName">Last Name:</label>
                            <input type="text" class="k-textbox" name="LastName" id="LastName" required="required" />
                        </li>
                        <li>
                            <label for="PhoneNumber">Phone Number:</label>
                            <input type="text" data-role='maskedtextbox' data-mask="(999) 000-0000" id="PhoneNumber" name="PhoneNumber" data-validmask-msg="Phone number is incomplete" required="required" />
                            <span data-for='PhoneNumber' class='k-invalid-msg'></span>
                        </li>
                        <li class="actions">
                            <button type="button" data-role="button" data-icon="check" data-click='save'>Save</button>
                        </li>
                    </ul>
                </form>
            </div>

            <script type="text/javascript">
                $(function () {
                    var container = $("#employeeForm");
                    kendo.init(container);
                    container.kendoValidator({
                        rules: {
                            validmask: function (input) {
                                console.log(input);
                                if (input.is("[data-validmask-msg]") && input.val() != "") {
                                    var maskedtextbox = input.data("kendoMaskedTextBox");
                                    return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                                }

                                return true;
                            }
                        }
                    });
                });

                function save(e) {
                    var validator = $("#employeeForm").data("kendoValidator");
                    if (validator.validate()) {
                        alert("Employee Saved");
                    }
                }

            </script>

            <style>

                #fieldlist {
                    margin: 0 0 -2em;
                    padding: 0;
                }

                #fieldlist li {
                    list-style: none;
                    padding-bottom: 2em;
                }

                #fieldlist label {
                    display: block;
                    padding-bottom: 1em;
                    font-weight: bold;
                    text-transform: uppercase;
                    font-size: 12px;
                    color: #444;
                }

                #fieldlist input {
                    width: 100%;
                }

                span.k-tooltip {
                    margin-top: 5px;
                    line-height: 1.7em;
                    width: 100%;
                    box-sizing: border-box;
                    text-align: left;
                }

            </style>
        </div>


    
</body>
</html>