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

<!DOCTYPE html>
<html>
<head>
    <title>Range 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="tickets">
          <form id="ticketsForm">
            <ul id="fieldlist">
              <li>
                <label for="amount">Amount</label>
                <input id="amount"
                       name="Amount"
                       type="text"
                       data-min="1"
                       data-max="10"
                       required
                       placeholder="Type a number between 1 and 10..."
                       style="width: 260px;"
                />
                <span class="k-invalid-msg" data-for="Amount"></span>
              </li>
              <li class="confirm">
                <button class="k-button k-primary">Submit</button>
              </li>
              <li class="status">
              </li>
            </ul>
          </form>
        </div>
      </div>

      <script>
        $(document).ready(function() {
          $("#amount").kendoNumericTextBox();

          var validator = $("#ticketsForm").kendoValidator({
            rules: {
              range: function(input) {
                var min = parseFloat($(input).data("min"), 10);
                var max = parseFloat($(input).data("max"), 10);
                var value = parseFloat($(input).val(), 10);

                if (isNaN(min) || isNaN(max) || isNaN(value)) {
                  return true;
                }

                return min <= value && value <= max;
              }
            },
            messages: {
              range: function(input) {
                var min = parseFloat($(input).data("min"), 10);
                var max = parseFloat($(input).data("max"), 10);

                return kendo.format("Value should be between {0} and {1}!", min, max);
              }
            }
          }).data("kendoValidator");

          window.validator = validator;

          $("form").submit(function(event) {
            event.preventDefault();

            var status = $(".status");

            if (validator.validate()) {
              status.text("Hooray! Your tickets has been booked!")
                .removeClass("invalid")
                .addClass("valid");
            } else {
              status.text("Oops! There is invalid data in the form.")
                .removeClass("valid")
                .addClass("invalid");
            }
          });
        });
      </script>

            <style>
                #fieldlist {
                    margin: 0;
                    padding: 0;
                }

                #fieldlist li {
                    list-style: none;
                    padding-bottom: .7em;
                    text-align: left;
                }

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

                #fieldlist li.status {
                    text-align: center;
                }

                #fieldlist li .k-widget:not(.k-tooltip),
                #fieldlist li .k-textbox {
                    margin: 0 5px 5px 0;
                }

                .confirm {
                    padding-top: 1em;
                }

                .valid {
                    color: green;
                }

                .invalid {
                    color: red;
                }
            </style>
        </div>


    
</body>
</html>