htmlvalidationmvvmkendo-mvvm

Kendo Ui MVVM Validation for controls


I have tried to apply the required attribute in ym HTML for validation. I implemented the logic of MVVM in my screen,

I invoked validator.validate() as well, and it's working fine, but I am not getting the notification for the same near my control.

  <input class="input-block-level" type="text" id="txtSupplierName" data-bind="value: SupplierName" 
                    placeholder="Supplier Name" required  validationMessage="Supplier Name required {0}"/>

validator

 validator = $("#supplierForm").kendoValidator().data("kendoValidator");

Currently I'm handling it with validator.validate() if true go ahead, if false then stop and show alert.


Solution

  • Add a span after the input. Use the 'data-for' attribute, and pass it the name of your input control (also, add a name to your input control).

    <span class="k-invalid-msg" data-for="txtSupplierName"></span>
    

    The CSS class is a Kendo class, so use your own styling if not using Kendo templates.