Walidacja inputów

Walidacja inputów
Nindzia
Nindzia
Nindzia
Nindzia
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 3 lata
  • Postów:255
0

Siema, mam kilka inputów w formularzu oraz checkboxa, chciałbym ustawić atrybut disabled buttona, który submituje forma na false tylko gdy wszystkie inputy przeszły swoją walidację.

Kopiuj
surnameInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[a-zA-z]+$/);
    if(regex.test(surnameInput.value) && surnameInput.value.length >= 2) {
        surnameInput.classList.remove('invalid')
    } else {
        surnameInput.classList.add('invalid')
  }
})

emailInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[^@]+@[^\.]+\..+$/);
    if(regex.test(emailInput.value) && emailInput.value.length >= 2) {
        emailInput.classList.remove('invalid')
    } else {
        emailInput.classList.add('invalid')
  }
})

Jednak trochę utknąłem na tym jak odblokować button, gdy wszystkie inputy już przeszły swoją walidację, a jak go dalej blokować gdy nie. Ktoś miałby pomysł jak to zrobić?

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
złoty
złoty
złoty
złoty
  • Rejestracja:ponad 17 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Warszawa
  • Postów:108
3

To zadanie sprowadza się do zawołania jakiejś jednej wspólnej funkcji, która sprawdzi, czy wszystkie inputy mają poprawne wejścia, i ustawi atrybut disabled na buttonie.

Zakładając że konsekwentnie będziesz ustawiał klasę invalid na niepoprawnych wejściach, najprościej możesz to zrobić tak:

Kopiuj
surnameInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[a-zA-z]+$/);
    if (regex.test(surnameInput.value) && surnameInput.value.length >= 2) {
        surnameInput.classList.remove('invalid')
    } else {
        surnameInput.classList.add('invalid')
    }

    validateForm();
});

emailInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[^@]+@[^\.]+\..+$/);
    if (regex.test(emailInput.value) && emailInput.value.length >= 2) {
        emailInput.classList.remove('invalid')
    } else {
        emailInput.classList.add('invalid')
    }

    validateForm();
});


function validateForm() {
    var submitButton = document.getElementById('submit-btn');
    var invalidInputs = document.querySelectorAll(".invalid");

    submitButton.disabled = invalidInputs.length > 0;
}

Pamiętaj że do prostych walidacji (np. regexem jak w tym przypadku) możesz użyć wbudowanych mechanizmów HTML5, które w dodatku same ustawią pseudoklasę :invalid na elementach, które nie przeszły walidacji.

Nindzia
wadą tego podejścia jest to, że jeśli wprowadzę dane tylko do jednego inputa a nie dotknę innych to button i tak ustawi mi się na disabled = false
złoty
W takim razie wykonaj walidację jeszcze dodatkowo przy załadowaniu strony, lub, druga opcja, przy załadowaniu strony wyczyść inputy i ustaw disabled na true
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto