Kendo ui 网格 - 使用自定义添加/编辑弹出表单模板时，相同的自定义验证规则不适用于多个字段

Question

我正在为网格 Add/Edit 弹出表单使用自定义模板。

这是我的 DEMO.

在我的弹出表单中，我有两个名为 postcode1 和 postcode2 的 Post 代码字段，并且都需要使用 自定义验证程序规则进行验证 postalCode.

现在的问题是，如果我在两个字段上应用相同的自定义验证规则 postalCode，则验证仅适用于输入字段 postcode2 和验证对于输入字段 postcode1 停止工作。

但是，对于输入字段 postcode2，如果我将自定义验证规则名称从 postalCode 更改为 postalCode2，验证将开始对这两个字段起作用。

由此我了解到，在多个字段上使用相同的自定义验证规则会导致问题。

那么有谁知道如何创建可应用于多个字段的自定义验证规则。

如有任何帮助，我们将不胜感激！谢谢。

下面是我的 js fiddle 演示中的代码：

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

为了实现这一点，我放弃了在 model 字段中使用验证的想法。相反，我使用 Kendo Validator 并将表单验证器附加到弹出表单。

这是我的 DEMO

下面是我的 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>