Validator: basic usage

app.html

<template>
  <require from="./basic-use.css"></require>
  <div id="example">
    <div class="demo-section k-content">
      <div id="tickets">
        <form id="ticketsForm" submit.delegate="submit($event)" ak-validator="k-widget.two-way: validator">
          <ul id="fieldlist">
            <li>
              <label for="fullname" class="required">Your Name</label>
              <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 220px;" />
            </li>
            <li>
              <label for="search" class="required">Movie</label>
              <ak-autocomplete k-data-source.bind="data" k-separator=", ">
                <input type="search" id="search" name="search" required validationMessage="Select movie" style="width: 220px;" /><span class="k-invalid-msg" data-for="search"></span>
              </ak-autocomplete>
            </li>
            <li>
              <label for="time">Start time</label>
              <ak-drop-down-list>
                <select name="time" id="time" required data-required-msg="Select start time" style="width: 220px;" >
                  <option>14:00</option>
                  <option>15:30</option>
                  <option>17:00</option>
                  <option>20:15</option>
                </select>
              </ak-drop-down-list>
              <span class="k-invalid-msg" data-for="time"></span>
            </li>
            <li>
              <label for="amount">Amount</label>
              <input id="amount" name="Amount" type="text" ak-numerictextbox="k-min.bind: 1; k-max.bind: 10; k-value.bind: 1" required data-max-msg="Enter value between 1 and 10" style="width: 220px;" />
              <span class="k-invalid-msg" data-for="Amount"></span>
            </li>
            <li>
              <label for="email" class="required">Email</label>
              <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname@example.net"  required data-email-msg="Email format is not valid"  style="width: 220px;"/>
            </li>
            <li>
              <label for="tel" class="required">Phone</label>
              <input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten digit number" required
              validationMessage="Enter at least ten digits" style="width: 220px;" />
            </li>
            <li  class="accept">
              <label>Terms of Service</label>
              <input type="checkbox" name="Accept" required validationMessage="Acceptance is required" /> <p>I accept the terms of service.</p>
            </li>
            <li class="confirm">
              <button class="k-button k-primary" type="submit">Submit</button>
            </li>
            <li class="status" ref="status">
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</template>

app.js

export class BasicUse {
  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'
  ];

  submit(event) {
    event.preventDefault();
    if (this.validator.validate()) {
      $(this.status).text('Hooray! Your tickets has been booked!')
      .removeClass('invalid')
      .addClass('valid');
    } else {
      $(this.status).text('Oops! There is invalid data in the form.')
      .removeClass('valid')
      .addClass('invalid');
    }
  }
}

basic-use.css

#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;
}

#fieldlist li input[type="checkbox"] {
  margin: 0 5px 0 0;
}

span.k-widget.k-tooltip-validation {
  display; inline-block;
  width: 160px;
  text-align: left;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  color: red;
}

.k-tooltip-validation .k-warning {
  display: none;
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}