CODEWITHSUNDEEP
jquerykendo-ui
Dennis Sherman
Dennis Sherman

Reputation: 81

jQuery validation of dropdownlist on Kendo window

I'm having a problem with using jQuery validation to validate Kendo widgets (dropdownlist in particular) that are on a modal KendoWindow which is populated with a form retrieved using AJAX. Validation works beautifully for everything except the Kendo widgets that use hidden fields (dropdownlist, textarea, etc) I've seen many posts (here and here, for example) that describe and solve very similar problems, but these approaches do not seem to work on a modal KendoWindow. The solution should be something like this:

$.validator.setDefaults({ ignore: ""});

but it does not work in my case. Here's my code from my partial view which loads the modal window via ajax:

    @model ProductManagement.Models.BaseModel

    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

    <script type="text/javascript">        
        $(function () {
            $.validator.setDefaults({ ignore: "" });
        });
    </script>

    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)...

Is there a trick for doing this? Any help would be greatly appreciated!

Upvotes: 3

Views: 2838

Answers (1)

Dennis Sherman
Dennis Sherman

Reputation: 81

Wow, I really spent a lot of time on this, but I did get it working. The answer, of course, is extremely simple. Here are the takeaways:

To configure a Kendo UI popup window to use jQuery validation (MVC 4):

  1. I got this working using jQuery Validation Plugin 1.8.1. Not sure how to do this using version >1.9.

  2. In _Layout.cshtml, add the following to the document ready function:
    $.validator.setDefaults({ ignore: "" }); EDIT: This is incorrect. Not needed for version 1.8.1.

  3. On the partial view that contains the popup form, reference jquery.validate.min.js and jquery.validate.unobtrusive.min.js

  4. On the form, all fields must have correct naming. For example, I'm using a view model which causes field names to look like "VM_ProductInfo.Product_ID", "VM_ProductInfo.Product_Name", etc. If any field is named inconsistently, for example just "Product_Description" (without the "VM_ProductInfo." prefix), validation only partially works correctly and the form submits despite errors.

  5. On the form, include ValidationMessageFor for any hidden fields. For example, if I were to hide the Product_ID field, I would still need to include validation, like this:

    @Html.HiddenFor(model => model.Product_ID) @Html.ValidationMessageFor(model => model.Product_ID)

Looking back, numbers 4 and 5 above are what caused me the most grief. I would have saved many hours of head banging if I had known to check for these.

This was a trial-and-error solution. Please reply if you know a better way.

Side note: The Kendo documentation says that specifying a Name for the Dropdownlist widget is mandatory. It ain't, at least as far as I can tell. By leaving off the .Name, the form builds with naming that's consistent with the rest of the form.

Upvotes: 3

Related Questions