Remote validation for kendowindow

Question

I implement remote validation. It works for usual fields correctly, but if field is situated in kendowindow jquery validation does not work.

How can I solve this problem?

Answer 1

This can be achieved using Kendo UI validator as demonstrated below:

Model with "Remote" annotation attribute:

public class ProductViewModel
{
    [Editable(false)]
    public int ProductID { get; set; }

    [Required]
    [Remote("UniqueName", "Home", ErrorMessage = "The entered name already exists.")]
    public string ProductName { get; set; }
}

Controller with "UniqueName" Action:

public ActionResult UniqueName(string productName)
{
    var context = new NorthwindEntities();

    return Json(!context.Products.Any(p => p.ProductName == productName), JsonRequestBehavior.AllowGet);
}

Script to add custom validation rule to the Kendo UI validation rules for the "Remote" validation attribute (can be placed anywhere on the page before Grid initialization code):

<script>
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                //define custom validation rule to match remote validation:
                mvcremotevalidation: function (input) {
                    if (input.is("[data-val-remote]") && input.val() != "") {
                        var remoteURL = input.attr("data-val-remote-url");
                        var valid;

                        $.ajax({
                            async: false,
                            url: remoteURL,
                            type: "GET",
                            dataType: "json",
                            data: validationData(input, this.element),
                            success: function (result) {
                                valid = result;
                            },
                            error: function () {
                                valid = false;
                            }
                        });

                        return valid;
                    }

                    return true;
                }
            },
            messages: {
                mvcremotevalidation: function (input) {
                    return input.attr("data-val-remote");
                }
            }
        });

        function validationData(input, context) {
            var fields = input.attr("data-val-remote-additionalFields").split(",");
            var name = input.prop("name");
            var prefix = name.substr(0, name.lastIndexOf(".") + 1);
            var fieldName;
            var data = {};
            for (var i = 0; i < fields.length; i++) {
                fieldName = fields[i].replace("*.", prefix);
                data[fieldName] = $("[name='" + fieldName + "']", context).val();
            }
            return data;
        }
    })(jQuery, kendo);

</script>

Grid initialization code:

@(Html.Kendo().Grid<KendoUIMVC5.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(comm =>
        {
            comm.Edit();
        });
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                model.Id(p => p.ProductID);
            })
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)