[SOLVED] ListInput and custom validation logic

Wich is the correct way to have a custom logic for checking the value of a ListInput ?
For instance i’ve an input attached to an autocomplete and i’ve to make sure that on change and blur
the value is one selected from the autocomplete; so i see two separated problem:

  1. using HTML checkValidity API
  2. setting a visual error message
function markInputAsError (componentEl, inputName, message) {
            var self = this;
            var el = componentEl.find('input[name="'+inputName+'"]');
            el.parent().parent().parent().addClass('item-input-with-error-message item-input-invalid');
            if (!el.next('.item-input-error-message').length) {
                self.$('<div class="item-input-error-message">'+message+'</div>').insertAfter(el);
            } else {

<input @blur=“clearError”>

 clearError : function (e) {
                var el = this.$(e.target);
                el.parent().parent().parent().removeClass('item-input-with-error-message item-input-invalid');

thank you @shastox !

I think i’ve found a BETTER way.

  1. Hook onChange and onBlur and write a custom validation function:
  2. use setCustomValidity on the input element
  3. call getInstance().input.validateInputs(containerElement) - this will update the classes

It would be nice that in input component we have a custom validation callback where we can return true/false with debounce and async too…

1 Like

Для тех, кому интересно как просто показать ошибку на поле и сбросить ее:

  1. input / select / textarea - ничего добавлять не нужно из разряда: required / validate
  2. Показать ошибку
el[0].setCustomValidity('любой текст');
  1. Убрать ошибку:
el[0].setCustomValidity(''); //пустая строка

el - Dom7 элемент, например: el = $(‘input[name="…"]’)

1 Like