validation is not firing on Upload with other controls

1 Answer 80 Views
Upload
TelerikDev
Top achievements
Rank 1
TelerikDev asked on 01 Jul 2023, 02:17 PM | edited on 01 Jul 2023, 02:18 PM

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
Top achievements
Rank 1
commented on 01 Jul 2023, 02:44 PM | edited

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

1 Answer, 1 is accepted

Sort by
1
Accepted
Ivan Danchev
Telerik team
answered on 05 Jul 2023, 01:37 PM

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

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

TelerikDev
Top achievements
Rank 1
commented on 06 Jul 2023, 04:37 AM

OK so for each control I need to write the custom logic?
Ivan Danchev
Telerik team
commented on 10 Jul 2023, 04:54 PM

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
Top achievements
Rank 1
commented on 11 Jul 2023, 02:34 AM

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
Telerik team
commented on 11 Jul 2023, 12:35 PM

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.

Tags
Upload
Asked by
TelerikDev
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or