validation is not firing on Upload with other controls

[TelerikDev]

I have a form as follows where it fires validation for text box controls but not for file upload

<form id="frmItem">
    <table class="table table-bordered">
        <thead class="bg-dark text-center text-white">
            <tr>
                <th colspan="2">Add/Modify Item</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:404px;">Item ID Name</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtItemName")
                        .HtmlAttributes(new { placeholder = "Item ID Name", required = "required", validationmessage = "Enter Item ID Name" }))
                </td>
            </tr>
            <tr>
                <td>UN Number</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtUnNumber")
                        .HtmlAttributes(new { placeholder = "UN Number", required = "required", validationmessage = "Enter UN Number" }))
                </td>
            </tr>
            <tr>
                <td>Packing Instructions</td>
                <td>
                    @(Html.Kendo().TextBox().Name("txtPackingInstructions")
                        .HtmlAttributes(new { placeholder = "Packing Instructions", required = "required", validationmessage = "Enter Packing Instructions" }))
                </td>
            </tr>
            <tr>
                <td>SDS Sheet</td>
                <td>
                    @(Html.Kendo().Upload().Name("SdsSheet")
                        .Multiple(false)
                        .HtmlAttributes(new { required = "required" }))
                </td>
            </tr>
            <tr>
                <td>Cargo Only?</td>
                <td>@(Html.Kendo().CheckBox().Name("txtCargoOnly"))</td>
            </tr>
            <tr>
                <td>Example Shipment Ground (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("GroundShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Next Day Air (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("NextDayShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Freight (Fully Regulated)</td>
                <td>@(Html.Kendo().Upload().Name("FreightShipment"))</td>
            </tr>
            <tr>
                <td>Example Shipment Ground (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("GroundShipmentLimited"))</td>
            </tr>
            <tr>
                <td>Example Shipment Next Day Air (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("NextDayShipmentLimited"))</td>
            </tr>
            <tr>
                <td>Example Shipment Freight (Limited Quantity)</td>
                <td>@(Html.Kendo().Upload().Name("FreightShipmentLimited"))</td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" type="submit">Submit</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<script>
    $(document).ready(function () {
        var validator = $("#frmItem").kendoValidator().data("kendoValidator");

        $("#frmItem").submit(function (event) {
            event.preventDefault();

            if (validator.validate()) {
                
            } else {
                
            }
        });
    });
</script>

[TelerikDev]

Also for the same how can we pass the file to the api

https://demos.telerik.com/aspnet-mvc/form/api

 

Also I am unable to call my own controller post method based on this demo

[Ivan Danchev]

Hi,

There is no built-in validation for a selected file in the Upload. If you want to validate a file selection, see this Knowledge Base article, which show how such a validation can be implemented by adding a custom rule in the Validator: https://docs.telerik.com/aspnet-mvc/knowledge-base/upload-file-selected-validation

As for the demo you've linked, it is of the Form UI component, which currently does not support integration with the Upload.

If you want to submit a file to the server, use a standard <form> Html element instead of a Form UI component, for example:

<form method="post" action='@Url.Action("Basic_Usage_Submit")'>
    <div class="demo-section">
        @(Html.Kendo().Upload()
            .Name("files")
            .HtmlAttributes(new { aria_label = "files" })
        )
        <p style="padding-top: 1em; text-align: right">
            <button type="submit" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md">Submit</button>
        </p>
    </div>
</form>

Here's a demo that shows this scenario: https://demos.telerik.com/aspnet-mvc/upload/basicusage Click the View Source tab, to see the configuration and the submit action.

Regards,
Ivan Danchev
Progress Telerik

[TelerikDev]

OK so for each control I need to write the custom logic?

[Ivan Danchev]

Hi,

If it comes down to functionality that is not provided by design, yes. Here are more details on the built-in validation in the Upload: https://docs.telerik.com/aspnet-mvc/html-helpers/editors/upload/validation

Scenarios that are not covered by the existing functionality of the components, require custom code to achieve.

Regards,
Ivan Danchev
Progress Telerik

[TelerikDev]

OK here is what I tried as per the examples provided and it worked 

@(Html.Kendo().Upload().Name("NextDayShipmentLimited")
.HtmlAttributes(new { validationmessage = "File is required" })
.Events(events => events
.Select("onImgSelect"))
 .Validation(validation => validation.AllowedExtensions(new string[] { "JPEG",".jpeg", ".JPG", ".jpg" })))
 <div class="demo-hint">You can only upload <strong>JPG</strong> files.</div>

$(function () {
   var container = $("#frmItem");
        kendo.init(container);
        container.kendoValidator({
            rules: {
                 upload: function (input) {
                    if (input.attr('name') == "SdsSheet") {
                        var uploadControl = $("#SdsSheet").data("kendoUpload"); //get a reference of the Upload component
                        var uploadedFiles = uploadControl.getFiles(); //get the uploaded files
                        return uploadedFiles.length > 0; //assert if there are any files selected
                    }
     }
});

[Ivan Danchev]

Hi,

I am glad to hear that the suggested approach that involves using a custom rule in the Validator worked out.

One note, I see that there is a mismatch in the id that is used in the validator's rule: SdsSheet and the Name of the Upload: NextDayShipmentLimited

Maybe in your scenario you are using multiple Upload components and there are different validation rules created for them, but in any case I though I should mention it.