required

[Isabelle Fuchs]

how can i set a date-picker on required. text-field is easy but i cant find an easy way for date picker....

[Ashokkumar Balasubramanian]

Hi Isabelle, 

 

We have checked your query at our end. We suspect that, you have tried to integrate the DatePicker validation functionality in your application. For this scenario, you can our FormValidator plugin to validate our input components (DatePicker). 

 

var options = { 

   rules: { 

      date: { required: true } 

   }, 

   customPlacement: function(element, errorElement) { 

       document.querySelector(".error-element").appendChild(errorElement); 

    }, 

}; 

 

// defines FormValidator to validate the DatePicker 

var formObject = new FormValidator("#form-element", options); 

 

We have prepared the simple sample for your requirement, please find it in below location. 

 

https://codesandbox.io/s/o7x7l1oy95 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/form-validator/validation-rules/ 

 

Please let us know, if the provided information’s are helpful to achieve your requirement or not. 

 

Regards, 

Ashokkumar B. 

[Isabelle Fuchs]

thanks for your help - i will try to make it like this with the rules...

but is it possible to design the date like this: date* when it is required? for Text Input it is possible - but for date i have the problem that i get double lines!

and i also would like to show the min - max Value under the line:

         number

          range: 1-8

or the Error Message not as a tooltip - also under the line:

number

                             8

error Message - out of range

thanks for your help...sorry for the questions but I'm beginner...

in javafx it is like this - and i must tell i like this :-)

[Ashokkumar Balasubramanian]

Hi Isabelle, 

 

Query: i have the problem that i get double lines!. 

 

We suspect the cause of the problem is the input element parent element class set to “e-float-input” and the css class based active border added. So double border added your application. The input component only is css component, so the class based floating label and border added. Please remove the e-float-input class element into DatePicker component. 

 

We have checked your requirements for validation for min and max value input components. We have provided form validation custom element to display the error message and check the min and max date range, show the custom error message. Please find the sample for your reference. 

 

Sample Link: https://codesandbox.io/s/n97xoj5l70 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/numerictextbox/how-to/perform-custom-validation-using-form-validator/?no-cache=1 

 

Please let us know, if the provided information’s are helpful to resolve your problems or not. 

 

Regards, 

Ashokkumar B.