Как валидировать пункты формы, которые добавляются AJAX?

Question

[0348raven]

$(document).ready(function(){

    //vars
    var $input = $('.js-input'), $date = $('.js-date');

    //validate-input
    $input.on('change, focusout', function(){

        var type = $(this).attr('data-validate'), $this = $(this);

        if(type == 'require'){
            if($this.val().length < 1) {
                $this.attr('data-success', 0);
                $this.parent().addClass('form__label--error');
            }else{
                $this.attr('data-success', 1);
                $this.parent().removeClass('form__label--error');
            }
        }
        
    });

    //validate-date
    $date.on('change, focusout', function(){

        var type = $(this).attr('data-validate'), $this = $(this);

        setTimeout(function(){

            if($this.val().length < 1) {
                $this.attr('data-success', 0);
                $this.parent().addClass('form__label--error');
            }else{
                $this.attr('data-success', 1);
                $this.parent().removeClass('form__label--error');
            }

        }, 300);

    });
    
});

Добавление пункта с помощью AJAX:

$('.js-add-form__item-number').click(function(){
        var addLine = $(this);

        $.ajax({
            url: '_form__item-number.html',
            success: function(html){
                $(html).insertBefore(addLine.parent());
            }
        });
    });

Ясное дело, что валидация не работает на пунктах, которые добавляются. Как быть?

Answer 1

[0348raven]

Оформил через функцию и вызываю ее дополнительно, после добавления блока. Не самое красивое решение, но рабочее.

Answer 2

[Артур]

Не работает, потому что обработчики событий сейчас вешаются только на уже существующие в DOM элементы, чтоб повесить их на все, используйте другой вариант записи:

$(document).on('change focusout', '.js-input', function () { // ... })

События, кстати, запятыми разделять не нужно

api.jquery.com/on

Comments

[0348raven]

Не работает, я так пробовал уже делать(

Answer 3

[Андрей Белокопытов]

Используйте обработчик события на родительском элементе с помощью метода $.on и селектора (api.jquery.com/on/)
В вашем случае это будет так:

$(document).on('change, focusout', '.js-input', function (evt) {
  ...
})

Тогда обработчик сработает для всех элементов с классом .js-input, которые находятся в контейнере на момент вызова обработчика.

Comments

[0348raven]

Валидация перестает работать даже уже на существующих элементах.