Как облагородить/сократить данный свитч?

Question

[FrelFrloich]

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

consentCheckbox = это чекбокс (аля соглашение), в какой то форме он есть, а в другой может и не быть
mailArr = массив всех инпутов с типом mail которые не прошли проверку что это почта (нет символа @ и т.п.)
inputEmptyArr = массив всех инпутов которые пусты
btnSubmite = кнопка валидации, которой я задаю класс исходя из условий

switch (consentCheckbox) {
    case null:
        let arrInput = [!mailArr.length, !inputEmptyArr.length]
        switch (arrInput.every((x) => x === true)) {
            case true:
                btnSubmite.classList.add('valid-success')
                break
            default:
                btnSubmite.classList.remove('valid-success')
                break
        }
        break

    default:
        let arrInputChecked = [!mailArr.length, !inputEmptyArr.length, consentCheckbox.checked]
        switch (arrInputChecked.every((x) => x === true)) {
            case true:
                btnSubmite.classList.add('valid-success')
                break
            default:
                btnSubmite.classList.remove('valid-success')
                break
        }

        break
}

Comments

[FrelFrloich]

Отметил все решёнными, все варианты подходят, но некоторые сокращены так что я завтра и не вспомню что там происходит.

Answer 1

[Сергей delphinpro]

Вот эта хренотень

switch (arrInput.every((x) => x === true)) {
            case true:
                btnSubmite.classList.add('valid-success')
                break
            default:
                btnSubmite.classList.remove('valid-success')
                break
        }

заменяется одной строкой

btnSubmite.classList.toggle('valid-success', arrInput.every((x) => x === true);

Answer 2

[Сергей Соколов]

Овер-сократить можно примерно так:

const checkArr = [!mailArr.length, !inputEmptyArr.length];
if (consentCheckbox) {
  checkArr.push(consentCheckbox.checked);
}
btnSubmite.classList.toggle('valid-success', !checkArr.some(x => !x));

В двух версиях массив отличается наличием последнего элемента .checked
Разницу - в if()

every(=== true) логически равноценно !some(=== false) – интересует, есть ли хоть один false.

Итого всех макарон – добавить или удалить класс.

Comments

[FrelFrloich]

Спасибо что объяснили.

[FrelFrloich]

Реально спасибо, я аж посмеялся с решения, красиво.

Answer 3

[Алексей Ярков]

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

Answer 4

[xdevelx]

const arrInput = (consentCheckbox === null)
  ? [!mailArr.length, !inputEmptyArr.length]
  : [!mailArr.length, !inputEmptyArr.length, consentCheckbox.checked];

btnSubmite.classList.toggle('valid-success', arrInput.every((x) => x === true));

только для toggle() force параметр IE не поддерживает (если вдруг есть такая необходимость) https://caniuse.com/mdn-api_domtokenlist_toggle_fo...
если нужна поддержка IE, то toggle заменить на if else или тернарник с вызовами classList.add и classList.remove

Answer 5

[Василий Банников]

Убрать switch вообще и использовать вместо него if.
Осмысленные действия распихать по функциям.

Вместо этого эзотерического

let arrInput = [!mailArr.length, !inputEmptyArr.length]
arrInput.every((x) => x === true)

Писать что-то типа

if(mailArr.length === 0 && emptyInputArr.length === 0)

Да, менее компактно, но более читабельно.