validationkendo-uikendo-gridkendo-templatekendo-validator

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


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' }]
});

Solution

  • 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");
      },
    });