Валидация с setCustomValidity. Можно ли сократить этот код?

Question

[TtT RrR]

Писал валидацию и хочу почитать советы чем заменить, сократить код. Например, на 15 строке костыль как можно объединить в checkValid?

Comments

[ksnk]

Тут надо не сокращать, а менять. Валидировать по имени поля - это гарантированно дублировать весь комплект валидации для каждой новой формы. Например, телефон, обычно, помечается < input type="tel" ... Так что накручивать на него логику проверки на телефонный номер нужно при наличии именно такого типа поля. email вполне корректно фильтруется самим броузером type="email"
Есть встроенная в броузер валидация по регулярке, если автоматически приписывать к полю с телефоном атрибут pattern="регулярка проверки на телефон", должно быть примерно что надо.
К этой долгой странной песне придется накручивать проверку данных на стороне сервера, фактически дублируя проверки уже сделанные на стороне броузера.

Можно пойти с конца, сделав минимальную проверку в броузере, чисто на встроенных механизмах, переслав данные серверу, и продемонстрировать обнаруженную сервером ошибку в данных.

Что нибудь вроде такого

var h=function(){
            this.setCustomValidity('');
        }
        // убираем сообщение об ошибке при начале изменения в поле. Неплохо бы добавить обработку 'paste'
        $('input, textarea', form_selector).change(h).on('keydown',h);

        function setInvalid(invalid, form) {
            // неплохо бы убрать сообщение об ошибке из предыдущей проверки
             $('input, textarea', form).trigger(h);
            // ставим первое сообщение в списке ошибок
            for(var a in invalid){
                var i=$('[name="'+a+'"]', form);
                if(i.length>0) {
                    i[0].setCustomValidity(invalid[a]);
                    i[0].reportValidity();
                    return;
                }
            }
           // не найдено поля с таким именем - выводим ошибку в специально обученное место
           console.log('opps!', invalid);
            
        }

Ajax должен передавать данные в виде отдельного поля результата - error:{`имя поля`:`сообщение об ошибке`}, просто для определенности, что ошибка была обнаружена и форма не была обработана сервером

...
success: function(data){
     if(data.error){
           setInvalid(data.error,form);
           return ;
     }
}

Из минусов - выводится только одна ошибка в единственное поле формы. Это свойство самого setCustomValidity, насколько я понимаю, если лепить несколько раз, все равно будет демонстрироваться один последний. Но никто не мешает отправить форму еще раз