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>

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

1 个答案: