Kendo ui grid - The same Custom validation rule is not working for multiple fields when using custom add / edit popup form template

Question

I am using custom template for Grid Add/Edit popup form.

Here is my DEMO.

In my popup form, I have two Post code fields having named postcode1 and postcode2 and both need to be validated using a custom validator rule postalCode.

Now the problem is, if I apply the same custom validation rule postalCode on both the fields, then the validation works only for the input field postcode2 and the validation for the input field postcode1 stops working.

However, for the input field postcode2, if I change the custom validation rule name from postalCode to postalCode2, the validation starts working for both the fields.

From this I got to know that when using the same custom validation rule on muliple fields cause issues.

So does anyone know how can I create a custom validation rule that can be applied to multiple fields.

Any help would be greatly appreciated! Thanks.

Below is the code from my js fiddle demo:

HTML:

<div id="grid"></div>

<script type="text/html" id="popup_editor_template">
    <div>
    <h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
    Address 1 : <input type="text" name="address1" required/> <br/>
    Post code 1 : <input type="number" name="postcode1" required                                                data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
    Address 2 : <input type="text" name="address2" required/> </br>
    Post code 2 : <input type="number" name="postcode2" required
                                        data-postalCode-msg="Postal Code must be four digits"
                    /> <br/>
  </div>
</script>

JS:

function validatePostalCode(input)
{
    //if ( input.is("[data-customPostalCode]") && input.val() )
  if (input.val() )
  {
    console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);

    //if (input.val().length != 4)
    if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
      return false;
  }
  return true;
}

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },       
        pageSize: 10,
        serverPaging: true,
        schema: {
            model: {
            fields: {
              postcode1: {
                type: "number",
                defaultValue: null,
                validation: {
                  postalCode: function (input) {
                    console.log('in heree');
                    if (input.is("[name=postcode1]"))
                    {
                      return validatePostalCode(input);
                    }
                    return true;
                  }
                }
              },

              postcode2: {
                type: "number",
                defaultValue: null,
                validation: {
                    //when changing rule name from "postalCode" to "postalCode2", the validation starts working on both fields
                  postalCode: function (input) {
                    console.log('in heree toooo');
                    if (input.is("[name=postcode2]"))
                    {
                      return validatePostalCode(input);
                    }
                    return true;
                  }
                }
              }
            }
        }
    },
    },
    height: 800,    
    pageable: true,
    columns: [
        "OrderID",
        "Freight",        
        "ShipName",                            
        "ShipCity"        
    ],
    toolbar: [
      { name: "create" },
    ],
    editable : {
      mode: 'popup',
      template: kendo.template($('#popup_editor_template').html())
    },
    save: function(e) {
        alert('Now save');
      e.preventDefault();
    }

});

Answer 1

To achieve this, I scrapped the idea using validation inside model fields. Instead I used Kendo Validator and attached the form validator to the popup form.

Here is my DEMO

Below is my code from the DEMO:

JS:

var validator;

function validatePostalCode(input)
{
  if (input.val() )
  {
    //console.log("in validatePostalCode: ", input.attr('name'), input.val(), input.val().length);

    //if (input.val().length != 4)
    if( input.val().length != 4 || ( /\D/.test(input.val()) ) )
      return false;
  }
  return true;
}

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },       
        pageSize: 10,
        serverPaging: true,
    },
    height: 800,    
    pageable: true,
    columns: [
        "OrderID",
        "Freight",        
        "ShipName",                            
        "ShipCity"        
    ],
    toolbar: [
      { name: "create" },
    ],
    editable : {
      mode: 'popup',
      template: kendo.template($('#popup_editor_template').html())
    },
    edit: function(e) {
        validator = $("#myform").kendoValidator({
         rules: {
           postalCode: function (input) {
             //console.log('in heree1234');
             if (input.is("[name=postcode1]"))
             {
               return validatePostalCode(input);
             }
             if (input.is("[name=postcode2]"))
             {
               return validatePostalCode(input);
             }
             return true;
           }
         }
    }).data("kendoValidator");
    },
    save: function(e) {
        if (! validator.validate() )
      {
        alert('Form has some errors, so form submit is prevented');
        //var errors = validator.errors();
        e.preventDefault();
      }
      else
      {
            alert('Form validated successfully. Now save the form data');
        e.preventDefault();
      }
    }

});

HTML:

<div id="grid"></div>

<script type="text/html" id="popup_editor_template">
    <div>
    <h4>In Post Code fields, enter value length less than or greater than 4 to see custom validation error message for postcode</h4>
    <div id="myform">
    Address 1 : <input type="text" name="address1" required/> <br/>
    Post code 1 : <input type="number" name="postcode1" required                                                data-postalCode-msg="Postal Code must be four digits"
/> <br/><br/>
    Address 2 : <input type="text" name="address2" required/> </br>
    Post code 2 : <input type="number" name="postcode2" required
                                        data-postalCode-msg="Postal Code must be four digits"
                    /> <br/>
                    </div>
  </div>
</script>