Twitter Bootstrap Form with kendoValidator

Twitter Bootstrap Form with kendoValidator

HTML

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              <span class="glyphicon glyphicon-remove"></span>
          </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          
          <form class="form-horizontal" role="form" id="vld">
              
              <div class="form-group">
                  <label for="error-message" class="col-sm-4 control-label">Error Message</label>
                  <div class="col-sm-8">
                      
                  </div>
              </div>
              
              <div class="form-group">
                  <label for="from" class="col-sm-4 control-label">From</label>
                  <div class="col-sm-8">
                      <input id="from" name="from" required="required"/>
                      <span class="k-invalid-msg" data-for="from"></span>
                  </div>
              </div>
              
              <div class="form-group">
                  <label for="to" class="col-sm-4 control-label">To</label>
                  <div class="col-sm-8">
               ...

JavaScript

$(document).ready(function() {
    $("#from").kendoDatePicker({
        format: "dd.MM.yyyy"
    });
    $("#to").kendoDatePicker({
        format: "dd.MM.yyyy"
    });
    
    $("#vld").kendoValidator({
        rules: {
            //implement your custom date validation
            dateValidation: function (input) {
                var currentDate = kendo.parseDate($(input).val(), "dd.MM.yyyy", "de-DE");
                //Check if Date parse is successful
                if (!currentDate) {
                    return false;
                }
                return true;
            }
        },
        messages: {
            //Define your custom validation massages
            required: "The From Date is required!",
            dateValidation: "Format not Valid!"
        }
    });    
});