JQuery validation interfere with the autocomplete structure

[Dan]

I have an autocomplete on a form. We are using jquery validation and I have discovered an issue that I don't know if it is kendo issue, jquery issue or my application issue.

The autocomplete field has a server validation and the form can load having the autocomplete field invalid. I have noticed that after the form is displayed in the browser the autocomplete is like this

<span tabindex="-1" class="k-widget k-autocomplete k-header input-validation-error form-control k-autocomplete-clearable k-state-default" role="presentation">
    <input name="AutoCompleteError" class="input-validation-error form-control k-input" id="AutoCompleteError" role="textbox" aria-disabled="false" aria-haspopup="true" aria-readonly="false" aria-owns="AutoCompleteError_listbox" aria-autocomplete="list" type="text" value="" data-role="autocomplete" autocomplete="off">
    <span tabindex="-1" title="clear" class="k-icon k-clear-value k-i-close k-hidden" role="button" unselectable="on"></span>
    <span class="k-icon k-i-loading" style="display: none;"></span>
</span>

Please noticed the input-validation-error on the span. The jquery is based on this and after I provide a valid value the jquery validation will remove all the dom structure because it does something like $('span.input-validation-error').text('').

Is the input-validation-error attached to autocomplete done by the .net core framework or done by the telerik framework? Can it be removed?

[Neli]

Hi Dan,

Please refer to the article from our documentation where Common Validation issues when using jQuery validations are described. In the link you will find a suggestion for removing 'input-validation-error' class.

Regards,
Neli
Progress Telerik