Creating a custom validator

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.web.min.js"></script>
<form id="myForm">
    <div>
        <input type="text" id = "name1" name="name1" required valid-name />
    </div>
    
     <div>
        <input type="text" id = "name2" name="name2" required valid-name />
    </div>
    <div>
        <input type="submit" value="Validate" />
    </div>
</form>

CSS

input.k-invalid {
    border-color: red;
}

JavaScript

jQuery(function($) {
   
    var validator = $("#myForm").kendoValidator({

      rules: {
        validName: function (input) {
          if (input.is('[valid-name]')) {
            var value = input.val();
            
            return value === "" ||
              value === "John";
          }
    
          return true;
        }
      },
    
      messages: {
        validName: "John is the only valid name"
      }
    
    }).data('kendoValidator');
    
    $("#myForm").submit(function (e) {
      validator.validate();
      e.preventDefault();
    });
    
});