剣道グリッドカスタムポップアップエディタテンプレートを使用する場合のフォームフィールドの追加/編集での条件付きカスタム検証

Question

剣道グリッドポップアップのカスタムテンプレートを使用してフォームを追加/編集しています。ここで私は、任意の値がアドレスのために入力された場合にそれ以外の場合は空にすることができ、その後、フィールド市と郵便番号が必要なになるはずです（空のままではない）などなどのフォームフィールドに条件付きの検証を実装したい私の働いDEMO

です。

：また、私は、その長さは、常に私はこれらのリンクを参照している

「郵便番号は4桁の数字でなければならない」として、それはカスタムエラーメッセージを表示する必要があり、他の4と同じでなければなりませんように、郵便番号のためのカスタム検証ルールを伊勢たい

Validation rules in datasource.model

Custom validation rules and error messages

が、私は私のデータソースモデルの検証を実装する方法を見つけ出すことはできませんか？ここで

私のコードです：

HTML：

<h3>I want to implement conditional validation on Add/Edit form such as if any value is entered for Address then the fields City and Postal Code should become required</h3> 
<div id="grid"></div> 
<script id="popup-editor" type="text/x-kendo-template"> 
    <p> 
    <label>Name:<input name="name" required /></label> 
    </p> 
    <p> 
    <label>Age: <input data-role="numerictextbox" name="age" required /></label> 
    </p> 

    <p> 
    <label>Address: <input name="address"/></label> 
    </p> 

    <p> 
    <label>City: <input name="city"/></label> 
    </p> 

    <p> 
    <label>Post Code: <input name="postcode"/></label> 
    </p> 
</script> 

JS：

$("#grid").kendoGrid({ 
    columns: [ 
    { field: "name" }, 
    { field: "age" }, 
    { command: "edit" } 
    ], 
    dataSource: { 
    data: [ 
     { id: 1, name: "Jane Doe", age: 30 }, 
     { id: 2, name: "John Doe", age: 33 } 
    ], 
    schema: { 
     model: { id: "id" }, 
     fields: { 
     name:{}, 
     age:{}, 
     address:{}, 
     city:{}, 
     postcode:{}, 
     }, 
    } 
    }, 
    editable: { 
    mode: "popup", 
    template: kendo.template($("#popup-editor").html()) 
    }, 
    toolbar: [{ name: 'create', text: 'Add' }] 
}); 

Answer 1

ここで私はそれを実装する方法DEMOです：

HTML：

<div id="grid"></div> 
<script id="popup-editor" type="text/x-kendo-template"> 
<div id="myForm"> 
    <p> 
    <label>Name:<input name="name" required /></label> 
    </p> 
    <p> 
    <label>Age: <input data-role="numerictextbox" name="age" required /></label> 
    </p> 

    <p> 
    <label>Address: <input name="address" id="address"/></label> 
    </p> 

    <p> 
    <label>City: <input name="city" id="city"/></label> 
    </p> 

    <p> 
    <label>Post Code: <input name="postcode" id="postcode"/></label> 
    <!--<span class="k-invalid-msg" data-for="postcode"></span>--> 
    </p> 
    </div> 
</script> 

JS：それはそうUP大きな助けとしたあなたの答えの伴侶のため

var validator; 
$("#grid").kendoGrid({ 
    columns: [ 
    { field: "name" }, 
    { field: "age" }, 
    { field: "address" }, 
    { field: "city" }, 
    { field: "postcode" }, 
    { command: "edit" } 
    ], 
    dataSource: { 
    data: [ 
     { id: 1, name: "Jane Doe", age: 30, address:'Addr', city:"city", postcode: '1234' }, 
     { id: 2, name: "John Doe", age: 33, address:'Addr11', city:"city11", postcode: '4321' } 
    ], 
    schema: { 
     model: { id: "id" }, 
     fields: { 
     name:{}, 
     age:{}, 
     address:{}, 
     city:{}, 
     postcode:{}, 
     }, 
    } 
    }, 
    editable: { 
    mode: "popup", 
    template: kendo.template($("#popup-editor").html()) 
    }, 
    toolbar: [{ name: 'create', text: 'Add' }], 
    save: function(e) {//alert('save clicked'); 
    if(!validator.validate()) { 
     e.preventDefault(); 
    } 
    },  
    edit: function(e){ 
    //alert('edit clicked'); 
    validator = $("#myForm").kendoValidator({ 
    messages: { 
     postcode: "Please enter a four digit Postal Code" 
    }, 
    rules: { 
     postcode: function(input) { 
      //console.log(input); 
      if (input.is("[name='address']")) 
      { 
       if (input.val() != '') 
       { 
        $('#city, #postcode').attr('required', 'required'); 
        //return false; 
       } 
       else 
       { 
        $('#city, #postcode').removeAttr("required"); 
       } 
      } 
      else if (input.is("[name='postcode']")) { 
       if ($('#address').val() != '' && input.val().length != 4) 
        return false; 
      } 
      return true; 
     } 
    }, 
}).data("kendoValidator"); 
    }, 
}); 

Answer 2

私はそれをやるとしたら、私は

これらのアプローチを行うだろう

1. 私はここで

を保存する前に、カスタムバリデータ

上書き編集（グリッド）機能の場所がバリ

上書き保存（グリッド）機能使用validator.validate（）を作成します。

var validator; 
$("#grid").kendoGrid({ 
    columns: [ 
    { field: "name" }, 
    { field: "age" }, 
    { command: "edit" } 
    ], 
    dataSource: { 
    data: [ 
     { id: 1, name: "Jane Doe", age: 30 }, 
     { id: 2, name: "John Doe", age: 33 } 
    ], 
    schema: { 
     model: { id: "id" }, 
     fields: { 
     name:{}, 
     age:{}, 
     address:{}, 
     city:{}, 
     postcode:{}, 
     }, 
    } 
    }, 
    save: function(e) { 
    if(!validator.data("kendoValidator").validate()){ 
     e.preventDefault(); 
    } 
    },  
    edit: function(){ 
    validator = $("#test-form").kendoValidator({ 
     validateOnBlur: false, 
     rules: { 
     matches: function(input) { 

      var requiredIfNotNull = input.data('test'); 
      // if the `data-test attribute was found` 
      if (requiredIfNotNull) { 
      // get the input requiredIfNotNull 
      var isFilled = $(requiredIfNotNull); 

      // trim the values and check them 
      if ($.trim(isFilled.val()) !== "") { 

       if($.trim(input.val()) !== ""){ 
       // the fields match 
       return true; 
       }else{ 
       return false; 
       } 

      } 
      // don't perform any match validation on the input since the requiredIf 
      return true; 
      } 

      // don't perform any match validation on the input 
      return true; 

     } 
     }, 
     messages: { 
     email: "That does not appear to be a valid email address", 
     matches: function(input) { 
      return input.data("testMsg"); 
     } 
     } 
    }); 
    }, 
    editable: { 
    mode: "popup", 
    template: kendo.template($("#popup-editor").html()) 
    }, 
    toolbar: [{ name: 'create', text: 'Add' }] 
}); 

PS：dojo の例では、基本的には、これは、グリッドコードである文は、あなたがそれを簡素化することができれば、私は多くのために使用私は

を考えます