form mvvm

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<form id="productEditForm">
    <h3>Hello</h3>
        <ul>
            <li>
                <label for="productName">Product Name: </label>
                <input type="text" id="productName" class="k-textbox" data-bind"value: productName" />                
            </li>
            <li>
                <label for="reorderLevel">Reorder Level: </label>
                <input type="number" id="reorderLevel" data-role="numerictextbox" data-format="n0" data-bind"value ReorderLevel" />
            </li>
            
            <li  class="accept">
                <button class="k-button" type="button">Check</button>
            </li>
            <li class="status">
            </li>
        </ul>
</form>

CSS

/*
  1. Привести форму в более менее читабельный вид
*/

JavaScript

var viewModel = kendo.observable({
    productsSource: dataSource,
    selectedProduct: null,
    checkThisForm: function() {
    
    }
});

kendo.bind($("#productEditForm"), viewModel);

/*
	1. Исправить ошибки
  2. При клике кнопки "Check" происходит валидация формы
  	2.1. Product Name - обязательное поле (от 3 до 25 символов)
  	2.2. Reorder Level - положительное число (до 25)
    2.3. Сделать вывод ошибок в читабельном виде
  3. Добавить необязательное текстовое поле Description
  4. В случае валидности формы, скрыть форму и на ее месте вывести сообщение "Форма успешно проверена"
  5. Любое дополнение на Ваше усмотрение
*/