Почему не срабатывает событие onchange?

Question

[Jake Taylor]

Имеется валидация полей (input) с помощью JS. Имеется несколько полей для заполнения и кнопка "Submit". В JS прописано при загрузке страници устанавливать сразу для кнопки "Submit" псевдокласс :disabled. На каждом поле стоит событие onfocus, которое в режиме реального времени проверяет валидность введенных в поле данных и событие onchange, которое и проверяет, если все данные, введенные во все поля input (если все функции проверки возвращают true), то, по логике, к кнопке "Submit" должен примениться псевдокласс :disabled, но этого не происходит. Почему?

Форма для ввода:

<!-- ПОЛЯ ДЛЯ ВВОДА -->
<input type="text" id="freight" name="volume" value="${freight}" placeholder="<fmt:message key="offer.freight"/>" onfocus="validateFreight()" onchange="validateConfirm()" required>

<input type="text" id="volume" name="volume" value="${volume}" placeholder="<fmt:message key="offer.volume"/>" onfocus="validateVolume()" onchange="validateConfirm()" required>

<!-- КНОПКА -->
<button type="submit" id="confirm" class="btn-confirm" href="${pageContext.request.contextPath}/controller?command=go_to_create_offer_page">
    <fmt:message key="cargo.button.createOffer"/>
</button>

Проверка с помощью JS:

const regexpVolume = /^\p{Nd}{1,10}(?:\.\p{Nd}{0,2})?$/u;
const regexpFreight = /^\p{Nd}{1,20}(?:\.\p{Nd}{0,2})?$/u;

window.onload = function () {
    const confirmButton = document.getElementById("confirm");
    confirmButton.disabled = true;
}

function validateVolume() {
    const volume = document.getElementById("volume");
    const descriptionVolume = document.getElementById("description_volume");

    volume.oninput = function() {
        if (regexpVolume.test(volume.value)) {
            descriptionVolume.style.color = "#50C878";
            return true;
        } else {
            descriptionVolume.style.color = "#F00";
            return false;
        }
    }
}

function validateFreight() {
    const freight = document.getElementById("freight");
    const descriptionFreight = document.getElementById("description_freight");

    freight.oninput = function() {
        if (regexpFreight.test(freight.value)) {
            descriptionFreight.style.color = "#50C878";
            return true;
        } else {
            descriptionFreight.style.color = "#F00";
            return false;
        }
    }
}

function validateConfirm() {
    const confirmButton = document.getElementById("confirm");
    
    if(validateVolume() && validateFreight()) {
        confirmButton.disabled = false;
    }
}

https://jsfiddle.net/tLdg6kwp/

Comments

[ThunderCat]

в фиддл загоните.

[Jake Taylor]

Изобретатель Дикпиков, С разметкой всё в порядке.

[Jake Taylor]

Изобретатель Дикпиков, Понял. Валидация то работает на поля, всё работает, но кнопка не меняется на disabled=false, когда все поля валидные.

[Егор Живагин]

Jake Taylor, так вы же ничего не возвращаете из validateVolume и validateFreight

Сделайте так и гляньте консоль:

function validateConfirm() {
    const confirmButton = document.getElementById("confirm");
    const isValidVolume = validateVolume();
    const isValidFreight = validateFreight();
    console.info('vol - ', isValidVolume, " freight - ", isValidFreight);
    
    if(isValidVolume && isValidFreight) {
        confirmButton.disabled = false;
    }
}

[ThunderCat]

const descriptionVolume = document.getElementById("description_volume");

Такого элемента в разметке вообще нет...

[Jake Taylor]

ThunderCat, https://jsfiddle.net/tLdg6kwp/

[Jake Taylor]

Егор Живагин,

function validateVolume() {
    const volume = document.getElementById("volume");
    const descriptionVolume = document.getElementById("description_volume");

    volume.oninput = function() {
        if (regexpVolume.test(volume.value)) {
            descriptionVolume.style.color = "#50C878";
            return true;
        } else {
            descriptionVolume.style.color = "#F00";
            return false;
        }
    }
}

true и false возвращается же или это результат вложенной функции?

[Егор Живагин]

Jake Taylor, true/false возвращаются из функции, которая вызывается на volume.oninput

[Jake Taylor]

Егор Живагин, Благодарю за наводку, попробую исправить

[ThunderCat]

Jake Taylor, Uncaught TypeError: regexpVolume.test is not a function

[Егор Живагин]

Jake Taylor, я, кстати, не очень понимаю ваш алгоритм

1) Допустим, юзер ввёл что-то в инпут volume и произвёл change
2) Вызывается validateConfirm
3) В validateConfirm вызывается validateVolume
4) В validateVolume на инпут вешается слушатель события "input", который будет вызван только при следующем событии "input" и в момент вызова он никак не будет связан с функциями validateConfirm/validateVolume

Причём получается, что с каждым новым событием change вы перезаписываете слушатель input на такой же)
Может вам просто изначально слушать событие input, а не change? И избавиться от oninput в скрипте

[Jake Taylor]

Егор Живагин, Переделал, посмотрите в первом ответе, пожалуйста.

Может вам просто изначально слушать событие input, а не change? И избавиться от oninput в скрипте

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

[Егор Живагин]

Jake Taylor, а разве input срабатывает при загрузке страницы? Это звучит сомнительно)

В конце-концов, можно добавлять обработчик не в разметку, а через document.addEventListener('input', yourFunction). Тогда обработчик точно не сработает при загрузке страницы

[Jake Taylor]

Егор Живагин, Сделал

document.addEventListener('input', validateConfirm);

, это работет, но частично. Когда поля становятся валидными, кнопка становится активной. Но когда вводжу невалидные данные, то кнопка опять не становится невалидной).
Переделал на такое:

document.addEventListener('input', validateConfirm);

function validateConfirm() {
    const confirmButton = document.getElementById("confirm");
    confirmButton.disabled = !(validateVolume() && validateFreight());
}

Answer 1

[ThunderCat]

Короче, код конечно... давайте по пунктам, так проще будет.
1) onfocus="validateFreight()" onchange="validateConfirm()" - так делать не надо. Делаете биндинг события по загрузке документа, это аккуратнее и прозрачнее.
2) function validateFreight() и validateVolume() внутри себя каждый раз при вызове создают 2 константы, которые опять же можно было определить вне этой функции и один раз определять по загрузке документа, и так же каждый раз вешает биндинг на событие freight.oninput, НО НЕ ВЫЗЫВАЕТ НИКАКИХ ПРОВЕРОК в момент вызова, соответственно if(validateVolume() && validateFreight()) никогда срабатывать не будут, так как по сути нифига не проверяют.

Comments

[Jake Taylor]

Спасибо, изменил таким образом:

const volume = document.getElementById("volume");
const descriptionVolume = document.getElementById("description_volume");
const freight = document.getElementById("freight");
const descriptionFreight = document.getElementById("description_freight");
const confirmButton = document.getElementById("confirm");

function validateVolume() {
    if (regexpVolume.test(volume.value)) {
        descriptionVolume.style.color = "#50C878";
        return true;
    } else {
        descriptionVolume.style.color = "#F00";
        return false;
    }
}

function validateFreight() {
    if (regexpFreight.test(freight.value)) {
        descriptionFreight.style.color = "#50C878";
        return true;
    } else {
        descriptionFreight.style.color = "#F00";
        return false;
    }
}

Получается, нужно на каждый инпут вешать событие, которое будет проверять валидность каждой формы или каким образом активировать кнопку, при условии валидности всех инпутов?

Такая форма записи функии проверки валидности годня?

function validateConfirm() {
    if(validateFreight()&& validateVolume()) {
        confirmButton.disabled = false;
    }
}

[ThunderCat]

Jake Taylor, Гораздо проще было бы завести 2 переменные, и устанавливать их в тру или фалс в зависимости от того, правильно ли в поле все введено. Если оба в порядке - тогда разрешать субмитить форму.

[Jake Taylor]

ThunderCat, Почему проще? Это дополнительные 2 переменные, которым присваивается результат функций.

[ThunderCat]

Jake Taylor, зато ничего вызывать не надо, ваши функции просто будут подсвечивать цветом описание при нажатии, а онсубмит просто проверит переменные валидности полей, не вызывая сразу каскад проверок еще раз (а регулярки один из самых затратных по процу алгоритмов). Тут классический выбор между памятью и процессором, что больше задействовать, то есть можно и так и так, но выбор чисто субъективный.

И еще - в итоге не нашел где будет вызываться validateConfirm()

[Jake Taylor]

ThunderCat, в JS файл в самый верх вставил

document.addEventListener('input', validateConfirm);

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

Надо обдумать, спасибо.