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>