I don't see how to trigger the display of a validation message. The stackblitz examples from https://www.telerik.com/kendo-react-ui/components/inputs/input/forms/ don't offer much insight. I don't have my inputs in a form, and I want to control when the validation popup is displayed. Can it be set to display for a time interval? Or is it on/off?
Help appreciated
3 Answers, 1 is accepted
That validation popup that is shown in this example is the browser validation. This is the built-in HTML validation which is shown once a form is submitted.
By default, the HTML validation is triggered when a form is submitted. In cases when the validation has to be triggered programmatically, the checkValidity method and the reportValidity method can be used. The first will return if the element is valid, and if it is not, the second one can be used to show the validation:
let input = document.getElementById("inputElement")let isValid = input.checkValidity()var test = input.reportValidity(isValid)I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
So I have a kendo Input component.
<Input ref={(e) => this.input = e as Input} value={this.state.value} style={{ width: '75px' }} onFocus={this.onFocus} onKeyDown={this.onKeyDown} onChange={this.onChange} valid={this.props.dataItem.valid} validationMessage="Invalid value" />And maybe during componentDidUpdate I want to control the display of the validation message. However, with my ref I am unable to reach the native html input element, at least by design, because its within a hidden _input property that is not documented nor exposed by the typescript definitions. So now it looks like I am stuck with searching the dom tree to find the input element. Is this correct? :-/
Indeed, the Input is not exposing the actual input element, but we can agree that it should.
I have logged this in our repository, so the developers' team can add the functionality, so taking the element will not require finding the element in the DOM.
This is the issue, so you can track its progress:
https://github.com/telerik/kendo-react/issues/72
Additionally, I have added some Telerik from bringing this to our attention.
Regards,
Stefan
Progress Telerik