Fire validation of asp.net razor view page input controls on kendo ui upload select file button

Question

I have an asp.net mvc application with Kendo UI controls. I have an upload file razor view with few input controls on the page.

My requirement is to fire the page validation on the file select button for all the other input controls in the page. (at least required validation has to get fired)

I can have a submit button and fire the validation. But I need to have that functionality on the Kendo UI upload select button. i.e,User can select / browse file to upload only after filling valid values for all the input controls.

I have done many searches and trial and error methods in my code but nothing helped. I am new to Kendo UI controls so please help

Thanks in advance,

I am attaching sample code below:

@{
    ViewBag.Title = "Kendo Validate";
}

@model KendoInputs_Validation.Models.ViewModel

@using(Html.BeginForm()) 
{
    <div id="tickets">
        <h3>Book Tickets</h3>
        <ul id="innerList">
            <li>
                @Html.LabelFor(m => m.ComboBox)
                @Html.Kendo().ComboBoxFor(m => m.ComboBox)
                @Html.ValidationMessageFor(m => m.ComboBox)
            </li>

            <li>
                @Html.LabelFor(m => m.DropDownList)
                @(Html.Kendo().DropDownListFor(m => m.DropDownList)
                      .OptionLabel("Select item...")
                      .BindTo(new SelectList(new string[] { "Item1", "Item2", "Item3" }))
                )

                @Html.ValidationMessageFor(m => m.DropDownList)
            </li>

            <li>
                @Html.LabelFor(m => m.DatePicker)
                @Html.Kendo().DatePickerFor(m => m.DatePicker)
                @Html.ValidationMessageFor(m => m.DatePicker)
            </li>

            <li>
                @Html.LabelFor(m => m.Number)
                @Html.Kendo().NumericTextBoxFor(m => m.Number)
                @Html.ValidationMessageFor(m => m.Number)
            </li>

            <li  class="accept">
                <button class="k-button" type="submit">Submit</button>
            </li>
            <li>
                @(Html.Kendo().Upload()
                                  .Name("files")
                                  .Messages(msg => msg
                                      .Select("Browse")
                                  ))
            </li>
        </ul>
    </div>
}

<script>
    $(document).ready(function () {
        /* Bind Mutation Events */
        var elements = $("#tickets").find("[data-role=combobox],[data-role=dropdownlist],[data-role=numerictextbox],[data-role^=date], [data-role^=upload]");

        //correct mutation event detection
        var hasMutationEvents = ("MutationEvent" in window),
            MutationObserver = window.WebKitMutationObserver || window.MutationObserver;

        if (MutationObserver) {
            var observer = new MutationObserver(function (mutations) {
                var idx = 0,
                    mutation,
                    length = mutations.length;

                for (; idx < length; idx++) {
                    mutation = mutations[idx];
                    if (mutation.attributeName === "class") {
                        updateCssOnPropertyChange(mutation);
                    }
                }
            }),
            config = { attributes: true, childList: false, characterData: false };

            elements.each(function () {
                observer.observe(this, config);
            });
        } else if (hasMutationEvents) {
            elements.bind("DOMAttrModified", updateCssOnPropertyChange);
        } else {
            elements.each(function () {
                this.attachEvent("onpropertychange", updateCssOnPropertyChange);
            });
        }
    });

    function updateCssOnPropertyChange (e) {
        var element = $(e.target);

        element.siblings("span.k-dropdown-wrap")
               .add(element.parent("span.k-numeric-wrap"))
               .add(element.parent("span.k-picker-wrap"))
               .toggleClass("k-invalid", element.hasClass("input-validation-error"));
    }
</script>

<style type="text/css">
    .k-widget > span.k-invalid,
    input.k-invalid
    {
        background: red;
    }

    #innerList li
    {
        margin: 10px 10px;
    }
</style>

Edit:- I can write an Select event for the upload control as below:

@(Html.Kendo().Upload()
.Name("files")
.Events(events => events
       .Select("onSelect")
 )
)

But in this case user has to select a file for getting the validation errors.

Our requirement is that when user clicks the select button validation errors should pop up. if no errors then only file select window opens.

Thanks

Answer 1

You can bind a click function to your upload during initialization and check your custom vale before the default behavior, the browse fro dialog, window is invoked.

$(document).ready(function () {

        $("#yourUploadName").click(function (e) {
            var valid=myValidationFunction();
            if (!valid) {
                alert("Bad");
                //This will cancel the showing of the search dialog 
                e.preventDefault();
            }
       });
 });