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

Question

我使用网格添加/编辑弹出窗体的自定义模板。

这是我的DEMO。

在我弹出的形式，我已经命名为postcode1和postcode2两位内线代码字段，都需要使用自定义的验证规则postalCode进行验证。

现在的问题是，如果我申请相同的自定义的验证规则postalCode两个字段，然后验证仅适用于输入字段postcode2和输入字段postcode1停止工作的有效性。

然而，对于输入字段postcode2，如果我改变了自定义的验证规则名称从postalCode到postalCode2，验证启动了两个领域的工作。

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

所以没有人知道如何创建一个自定义验证规则，可以应用于多个领域。

任何帮助将不胜感激！谢谢。

下面是我的js小提琴的演示代码：

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>