Solved- Custom Rule for Remote Validation in Custom PopUpEditor with Additional Field

[Taylor]

Hi,

I'm posting this in case anybody else has had issues with remote validation + grid custom popupeditor + additional field.

I'm working on a grid with a custom PopUpEditor made up of Kendo TextBoxes.  The viewmodel specifies remote validation with an additional field that is in the PopUpEditor.   To implement remote validation, I am following https://demos.telerik.com/aspnet-mvc/grid/editing-remote-validation, including using the javascript custom validation rule.  This demo works well for remote validation without additional fields, but it appears to not generate the data payload correctly if an additional field is specified. 

The code in the demo for creating the data payload is:

    //adding remote rule to handle validation based on Remote attribute set in the model.
    $(document).ready( function () {
        $.extend(true, kendo.ui.validator, {
            rules: {
                remote: function (input) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");
                        return !(input.attr("data-val-remote"));
                    }

                    var url = input.attr("data-val-remote-url");
                    var postData = {};
                    postData[input.attr("data-val-remote-additionalfields").split(".")[1]] = input.val();
...

The last line in the above snippet appears to be the problem, because the attribute value is actually in the form "*.Field1,*.Field2" where Field1 is the name of the field to be validated, and Field2 is the additional field specified in the view model.  The resulting array is ["*", "Field1*," "Field2"], and only "Field1*" gets assigned a value.  It's not clear to me why the fields names are rendered in this manner.

The example in https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/editing/using-remote-validation-in-grid handles the additional fields, as seen in this snippet from the code:

    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                remote: function (input) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");
                        return !(input.attr("data-val-remote"));
                    }

                    var url = input.attr("data-val-remote-url");
                    var postData = {};
                    var addFields = input.attr("data-val-remote-additionalfields").replace(/\*./g, "").split(",");
                    $.each(addFields, function (index, val) {
                        postData[val] = $("input[name='" + val + "']").val();
                    });
...

Here, "*." is stripped out of the field names, and the code iterates through the generated array, assigning values.

 

While this code worked for me, if you encounter issues, you can look at https://www.telerik.com/forums/remote-validation-with-additionalfields-when-editing-the-grid.  It has a rule that handles remote validation for a specific field and a specific additional field:

$.extend(true, kendo.ui.validator, {
  rules: {
    remote: function (input) {
      if (input.is("[name=Code]") && input.val()) {
        var productId = $("input[name='Id']").val();
        var productCode = input.val();
        $.ajax({
          url: '@Url.Action("VerifyCode", "Products")',
          type: "GET",
          async: false,
          data: { "ProductCode": productCode, "id": productId},
...

 

Hopefully this information will help out others.  Please feel free to comment with other details or corrections.

Thanks,

Taylor

[Aleksandar]

Hi Taylor,

Thank you for sharing the summary and what worked for the scenario you have. While all the above approaches work we have aimed to demonstrate a way to cover more scenarios, or a specific case, as in the last example. I am sure the above summary will be helpful to the community.