1

我正在为网格添加/编辑弹出表单使用自定义模板。

这是我的演示。

postcode1在我的弹出表单中，我有两个名为和的邮政编码字段postcode2都需要使用自定义验证器规则 postalCode进行验证。

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

但是，对于 input field 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();
    }

});
4

1 回答 1

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>
于 2017-10-05T09:57:50.137 回答