validation for inputs in template not working

[Luke]

I have set up a kendo window to popup from a grid command. On the window is a form with cascading drop down lists and an optional input field. How do I set up kendo validation for the form in the template?

This is my template. Note, the inputs in this form are not bound to fields in the model for my view. This is a stand alone form separate from the model for the page.

<script type="text/x-kendo-template" id="AssignInventoryTemplate">

    <form id="AssignInventoryForm" class="k-edit-form-container" action="@Url.Action("AssignInventory", "Inventory")" method="post" kendo-validator="true">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="inventoryId" name="inventoryId" value="#:data.Id#" />
        <input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
        @Html.AntiForgeryToken()

        <div class="k-edit-label">
            <label>Assignment Type</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("assignmentTypeId")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignment Type")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                    });
                })
                .HtmlAttributes(new { required = "required", validationmessage = "Assignment type is required" })
                .ToClientTemplate()
            )
        </div>

        <div class="k-edit-label">
            <label>Assign To</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("assigneeId")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignee")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("assignmentTypeId")
                .HtmlAttributes(new { required = "required", validationmessage = "Assignee is required" })
                .ToClientTemplate()
            )
        </div>

        # if(data.BulkItems) { #
            <div class="k-edit-label">
                <label>Quantity To Assign</label>
            </div>
            <div class="k-edit-field">
                <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                    <input id="quantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="quantityToAssign" value="1" required="required" validationMessage="Quantity to assign is required">
                </span>
                <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="quantityToAssign" id="quantityToAssign_validationMessage" data-valmsg-for="quantityToAssign">
                    <span class="k-tooltip-icon k-icon k-i-warning"></span>
                    <span class="k-tooltip-content">The Quantity To Assign field is required.</span>
                    <span class="k-callout k-callout-n"></span>
                </div>
            </div>
        #}#

        <div class="k-edit-buttons k-actions-end">
            <button type="button" onclick="AssignInventorySubmit(event)" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
                <span class="k-icon k-i-check k-button-icon"></span>
                <span class="k-button-text">Save</span>
            </button>
        </div>
    </form>

</script>

This is the submit handler

function AssignInventorySubmit(e) {
    var validator = $("#AssignInventoryForm").data("kendoValidator");
    if (validator.validate())
        $("#AssignInventoryForm").submit();
}

This is the error I'm getting in the console

Uncaught TypeError: can't access property "validate", validator is undefined
    AssignInventorySubmit http://localhost:55614/Inventory:209
    onclick http://localhost:55614/Inventory:1
3 Inventory:209:17

[Stoyan]

Hello Luke,

Thank you for sharing your code.

To overcome this error use Kendo for jQuery to initialize a Validator to the form element.

function AssignInventorySubmit(e) {
   $("#AssignInventoryForm").kendoValidator();
   var validator = $("#AssignInventoryForm").data("kendoValidator");
   if (validator.validate()){
      $("#AssignInventoryForm").submit();
   }
}

Regards,
Stoyan
Progress Telerik

[Luke]

Thank you, Stoyan. You wouldn't believe the time I wasted on this when I was just overlooking that one missing line.

I have a follow up question. How do I get the validation errors to look the same as the grid editing validation? See the attached images for the differences.

Form input from my template:

<div class="k-edit-label">
    <label>Quantity To Assign</label>
</div>
 <div class="k-edit-field">
    <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
        <input id="quantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="quantityToAssign" value="1" required="required" validationMessage="Quantity to assign is required">
    </span>
    <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="quantityToAssign" id="quantityToAssign_validationMessage" data-valmsg-for="quantityToAssign">
        <span class="k-tooltip-icon k-icon k-i-warning"></span>
        <span class="k-tooltip-content">The Quantity To Assign field is required.</span>
        <span class="k-callout k-callout-n"></span>
    </div>
</div>

This is the code generated from the validation instead of the code supplied in the template:

<span class="k-form-error k-invalid-msg field-validation-error" data-for="quantityToAssign" id="quantityToAssign_validationMessage" data-valmsg-for="quantityToAssign">Quantity to assign is required</span>

Grid editing generated error:

<div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error" data-for="InventoryTypeId" id="InventoryTypeId_validationMessage" data-valmsg-for="InventoryTypeId">
    <span class="k-tooltip-icon k-icon k-i-warning"></span>
    <span class="k-tooltip-content">The InventoryTypeId field is required.</span>
    <span class="k-callout k-callout-n"></span>
</div>

[Stoyan]

Hi Luke,

I am glad I've been helpful so far.

To display the validation message of the Validator in a Tooltip utilize the errorTemplate configuration:

$("div").kendoValidator({
          errorTemplate: ({ message }) => '<div class="k-tooltip k-tooltip-error k-validator-tooltip">' +
            '<span class="k-tooltip-icon k-icon k-i-warning"></span>' +
            `<span class="k-tooltip-content">${message}</span>` +
            '<span class="k-callout k-callout-n"></span>' +
        '</div>'
});

I've applied the suggestion above to this Dojo.