validate Querybuilder from field type date doesn't work

[salwaen]

Hi,

in this Code although field from type date (HireDate) is empty 

query builder.value.$el.ej2_instances[0].validateFields() is always True

How do I get False when (HireDate) is empty?

Thanks

<template>
  <div className="control-section">
    <div className="col-lg-12 querybuilder-control">
      <ejs-querybuilder ref="querybuilder" width="70%" :dataSource="dataSource" allowValidation="true">
        <e-columns>
          <e-column field='EmployeeID' label='Employee ID' type='number' :validation="validateRule" />
          <e-column field='FirstName' label='First Name' type='string' :validation="validateRule"/>
          <e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values" :validation="validateRule"/>
          <e-column field='Title' label='Title' type='string' :validation="validateRule" />
          <e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' :validation="validateRule" />
          <e-column field='Country' label='Country' type='string' :validation="validateRule"/>
          <e-column field='City' label='City' type='string' :validation="validateRule"/>
        </e-columns>
      </ejs-querybuilder>
      <ejs-button cssClass="e-qb-button" :isPrimary="true"  @click="btnClick">Validate Fields</ejs-button>
    </div>
  </div>
</template>

<script>
import {QueryBuilderComponent, ColumnDirective, ColumnsDirective} from "@syncfusion/ej2-vue-querybuilder";
import { ref} from "vue";
export default {
  name: "App",
  components: {
    "ejs-querybuilder": QueryBuilderComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective
  },
  setup() {
    let employeeData = [{
      'EmployeeID': 1,
      'FirstName': 'Nancy',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'City': 'Seattle',
      'Country': 'USA'
    },
      {
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'Title': 'Vice President',
        'TitleOfCourtesy': 'Dr.',
        'HireDate': '21/04/2003',
        'City': 'Tacoma',
        'Country': 'USA'
      },
      {
        'EmployeeID': 3,
        'FirstName': 'Janet',
        'Title': 'Sales Representative',
        'TitleOfCourtesy': 'Ms.',
        'HireDate': '22/07/2001',
        'City': 'Kirkland',
        'Country': 'USA'
      }];
    const querybuilder = ref()
    const validateRule = ref({isRequired: true})
    function btnClick(){
        querybuilder.value.$el.ej2_instances[0].validateFields();
    }
    const dataSource = ref(employeeData)

    return {dataSource, querybuilder, btnClick, validateRule};
  }
}
</script>
<style>

</style>

[Gayathri KarunaiAnandam]

Hi Salwaen,

We have provided null support to DatePicker, in this support when there is null value in datepicker Querybuilder returns the rule with value as null. Hence while validation, it’s doesn’t throw validation error message. We can dynamically add validation to datePicker by using template support. We have prepared a sample based on your requirement. Please check the below sample.

Sample: https://codesandbox.io/s/vue-querybuilder-validaition-6fzf85

Please check and get back to us, if you need further assistance.

Regards,

Gayathri