Как отловить на jquery/javascript валидацию user-invalid?

Question

[tgarl]

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

let localDisabled = [];
if (input.value.length != 0) {
              localDisabled = [...localDisabled, false];             
            } else {
              localDisabled = [...localDisabled, true];
            }

и через css наводят красоту :user-invalid.

Мой скрипт теперь падает с ошибкой по отправке через аякс. Как мне перед отправкой дополнительно поймать какие поля блокируют?

Comments

[szQocks]

ну прочитай ошибку которую отправляет сервер, и если там будет инфа о том - какие входные данные с клиента его не устраивают, от этого и отталкивайся

если запрос не отправляется, смотри что там в консоли

[tgarl]

Запрос не отправляется. В консоли нет ничего, а около поля появляется текст: Пожалуйста, заполните это поле(если поле пустое), Пожалуйста, введите адрес электронной почты(если тип поля email) и т.д.

Как я понимаю это теперь браузеры начали поддерживать внутреннюю валидацию. И она блокирует отправку невалидных форм, причем неважно по аяксу вызываю submit или по кнопке

[szQocks]

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

[tgarl]

так это по сути весь код валидации и я не понимаю как он работает

let inputs = form.querySelectorAll("input");
let inputsFilter = [...inputs].filter((filter) => filter.type != "file");
let localDisabled = [];
inputsFilter.forEach((input) => {
 if (input.value.length != 0) {
              localDisabled = [...localDisabled, false];              
            } else {
              localDisabled = [...localDisabled, true];              
            }
}
});

вот вся валидация, остальное через css прописывается

.input:user-invalid, .input:not(:placeholder-shown):user-invalid {
  border: 0.1rem solid var(--red);
}

По ошибке моего скрипта, я понял - я вызываю прелодер перед вызовом submit , а сам submit блокируется вот и получается что я вижу прелодер и текст "Пожалуйста, заполните это поле" и больше ничего не работает - так что некорректно выразился по поводу падает с ошибкой.

[MrColdCoffee]

побольше кода бы...

может у Вас указано required на input?

[leeroyjenkins176]

tgarl, так вызывайте прелоадер внутри onsubmit

[tgarl]

MrColdCoffee, да на инпуте указано required

Уже все что нашел, стер. и все равно валидация отрабатывает.

[tgarl]

насколько я понимаю это html5 так реагирует теперь, но как это обойти не понимаю. Мне нужно сделать submit всей формы, даже с полями которые не прошли валидацию, просто в этом случае обновится часть контента.
Если вдруг кто-то знает как работает в битриксе sale.order.ajax, тот поймет. Кто не знает, то кратко - при изменениях доставки, города, платежки идет submit всей формы и результат обновляет контент

[szQocks]

tgarl,

inputsFilter.forEach(v => v.removeAttribute('require'))

но потом их нужно будет добавить обратно эти аттрибуты - после того как ответ с сервера придёт, а лучше вообще переделать всё там нормально, вообще с этим на фриланс