Conditional and custom validation on Add / Edit form fields when using Kendo grid custom popup editor template

Question

I am using a custom template for kendo grid popup Add / Edit form. Here is my working DEMO

I want to implement conditional validation on form fields such as if any value is entered for Address (not left empty) then the fields City and Postal Code should become required, otherwise they can be empty. Also I want to ise a custom validation rule for PostCode so that its length should always be equal to 4 else it should show a custom error message as "Postcode must be four digits"

I have referred these links:

Validation rules in datasource.model

Custom validation rules and error messages

but I can't figure out how can I implement validations in my datasource model?

Here is my code:

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

Here is the DEMO how I implemented it:

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:

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

If i were to do that, i would do these approach where

1. I will create a custom validator
2. Override the edit(grid) function place the validator there
3. Override the save(grid) function use validator.validate() before saving

Here is an example in dojo basically this is the grid code:

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: i used to many if statement, you could simplify it i think