jube-fork/Jube.App/wwwroot/kendo/examples/validator/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</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/angular.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" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">

        <div id="validation-summary" ng-show="validationSummaryVisible">
            <div class="k-messagebox k-messagebox-{{ validationClass }}">{{ validationMessage }} </div>
        </div>

        <form class="k-form k-form-vertical" kendo-validator="validator" ng-submit="validate($event)">
            <ul id="fieldlist">
                <li class="k-form-field">
                    <label for="fullname" class="k-form-label">Your Name</label>
                    <span class="k-form-field-wrap">
                        <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name"
                            required validationMessage="Enter {0}" />
                    </span>
                </li>
                <li class="k-form-field">
                    <label for="search" class="k-form-label">Movie</label>
                    <span class="k-form-field-wrap">
                        <input type="search" kendo-autocomplete k-separator='","' k-data-source="data" id="search" name="search"
                            required validationMessage="Select movie" />
                        <span class="k-invalid-msg" data-for="search"></span>
                    </span>
                </li>
                <li class="k-form-field">
                    <label for="time" class="k-form-label">Start time</label>
                    <span class="k-form-field-wrap">
                        <select kendo-dropdownlist k-option-label="'--Start time--'" name="time" id="time"
                            required data-required-msg="Select start time">
                            <option>14:00</option>
                            <option>15:30</option>
                            <option>17:00</option>
                            <option>20:15</option>
                        </select>
                        <span class="k-invalid-msg" data-for="time"></span>
                    </span>
                </li>
                <li class="k-form-field">
                    <label for="amount" class="k-form-label">Amount</label>
                    <span class="k-form-field-wrap">
                        <input id="amount" kendo-numerictextbox name="Amount" type="text" min="1" max="10" value="1"
                            required data-max-msg="Enter value between 1 and 10" />
                        <span class="k-invalid-msg" data-for="Amount"></span>
                    </span>
                </li>
                <li class="k-form-field">
                    <label for="email" class="k-form-label">Email</label>
                    <span class="k-form-field-wrap">
                        <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. [email protected]"
                            required data-email-msg="Email format is not valid" />
                    </span>
                </li>
                <li class="k-form-field">
                    <label for="tel" class="k-form-label">Phone</label>
                    <span class="k-form-field-wrap">
                        <input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten-digit number"
                            required validationMessage="Enter a ten-digit number"/>
                    </span>
                </li>
                <li class="k-form-field">
                    <span class="k-form-field-wrap">
                        <label>
                            <input type="checkbox" name="Accept" required validationMessage="Acceptance is required" />
                            I accept the terms of service
                        </label>
                    </span>
                </li>
                <li class="k-form-buttons">
                    <button class="k-button k-primary" type="submit">Submit</button>
                </li>
            </ul>
        </form>
    </div>
</div>


<style>
</style>


<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.data = [
                "12 Angry Men",
                "Il buono, il brutto, il cattivo.",
                "Inception",
                "One Flew Over the Cuckoo's Nest",
                "Pulp Fiction",
                "Schindler's List",
                "The Dark Knight",
                "The Godfather",
                "The Godfather: Part II",
                "The Shawshank Redemption"
            ];

            $scope.validationSummaryVisible = false;

            $scope.validate = function(event) {
                event.preventDefault();

                if ($scope.validator.validate()) {
                    $scope.validationSummaryVisible = true;
                    $scope.validationMessage = "Hooray! Your tickets has been booked!";
                    $scope.validationClass = "success";
                } else {
                    $scope.validationSummaryVisible = true;
                    $scope.validationMessage = "Oops! There is invalid data in the form.";
                    $scope.validationClass = "error";
                }
            }
        })
</script>

    
</body>
</html>