[SOLVED] ListInput and custom validation logic

Questions
1

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
2 
function markInputAsError (componentEl, inputName, message) {
            var self = this;
            var el = componentEl.find('input[name="'+inputName+'"]');
            el.addClass('input-invalid');
            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 {
                el.next('.item-input-error-message').html(message);
            }
        },
3

<input @blur=“clearError”>

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

thank you @shastox !

5

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
6

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

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

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

1 Like