Walidacja formularza numer telefonu JavaScript

pytanie zadane 11 czerwca 2018 w JavaScript przez anna135B Początkujący (270 p.)

Cześć,

Próbuję napisać walidację formularza, w którym do wypełnienia jest tylko pole z numerem telefonu, chcę by przy nieprawidłowej wartosci( litery, puste pole lub za krótki numer) pojawiał się czerwony border wokół inputu i żeby button submit był zablokowany. Tutaj podaję moj kod HTML i próby z JS. Dziekuję za wszelką pomoc!

<form action="#form-message" class="form" id="formValidate" name="formValidate">
            <h2 class="heading-secondary">Wpisz swój numer telefonu i naciśnij przycisk</h2>
            <span class="heading-secondary_special">Kontynuuj</span>
            <input type="tel" class="form-input" id="phone-number" placeholder="Twój numer telefonu..." size="9" minlength="9" maxlength="9" pattern="!/^([0-9]{9})$/" required>
             <label for="phone-number"></label>
             <button class="form-button" id= "form-button" type="submit">Kontynuuj</button>
</form>

a tutaj JavaScript

function validatetel(tel) {
    var reg = '!/^([0-9]{9})$/';
    if(tel !== reg) {
        return document.querySelector('.form-input').style.border = '3px solid red';
    } else {
        return document.querySelector('.form-input').style.border = '3px solid #00d81a';
    }
}

document.getElementById('phone-number').addEventListener('keyup', validatetel);

Póki co rzeczywiście mam czerwony border ale nie działa tak jak napisałam na początku.

Każda podpowiedz będzie na wagę złota, dzięki!

3 odpowiedzi

odpowiedź 11 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 18 czerwca 2018 przez anna135B

Najlepsza

var reg = '!/^([0-9]{9})$/';

ta linijka jest zła. Nie tworzysz obiektu regexp ale zwykły ciąg znakowy string. Aby stworzyć obiekt regexp musisz zastosować inną metodę, np. zrobić to tak:

const reg = /^([0-9]{9})$/;

i potem możesz użyć metody RegExp.prototype.test:

reg.test( value )

co zwróci Ci boolean.

A tak po za tym to sam regexp jest troszkę dyskusyjny. Badasz w nim czy ciąg zawiera dokładnie 9 cyfr, co można by też zapisać jako /^\d{9}$/ ale głównie pytanie czy dopuszczasz też przy wpisywaniu jakieś białe znaki, myślniki itp, a może i znak plusa?

Jeśli tak, to są dwie drogi, albo zmodyfikować regexp, albo przed walidacją usunąć te znaki. Co więcej, zakładasz, że numer ma mieć 9 cyfr co jest oki w polskich numerach komórek, ale nie jest to zasada uniwersalna - zastanów się więc skąd dokładnie będzie brany ten numer i jaką masz pewność, że będą to tylko numery 9-cio cyfrowe.

A jeśli chciałbyś walidować tylko samym regexp to możesz to też machnąć w html ustawiając atrybut pattern i walidację formsa, choć zrobienie tego w JS metodą test() ma lepsze wsparcie, ale to już poboczna kwestia w tym przypadku.

No i do metody walidującej musisz przekazać tel jako string. Co prawda metoda test() poradzi sobie z innymi typami jak number itp. ale zostanie wtedy niejawnie wywołane toString() co czasem może prowadzić do nieoczekiwanych rezultatów, dlatego wg mnie lepiej jawnie przekazać konkretny typ.

odpowiedź 11 czerwca 2018 przez zgrybus Pasjonat (24,860 p.)

tel !== reg

zamiast tego, polecam to:

reg.test(tel)

komentarz 11 czerwca 2018 przez lapacz.kornel Mądrala (6,930 p.)

I w `tel` chyba siedzi event a nie wartość inputa.

odpowiedź 11 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

Weź też pod uwagę, że obsługa JavaScriptu może być wyłączona.

komentarz 11 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Ja bym się tym aż tak nie przejmował. Można tutaj pomyśleć np. nad walidacją html5 z pattern i w razie czego w js ją odłącząć i machnąć jakąs bardziej rozbudowaną, ale co by nie było to dane i tak walidujemy zawsze w back-endzie w API.

A ponad to pytanie zawsze na ile przepuszczenie danych niespełniających walidacji byłoby szkodliwe dla aplikacji, jeśli w ogóle?

komentarz 11 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

Walidacja po stronie serwera jest niezbędna.

komentarz 11 czerwca 2018 przez Secrus Nałogowiec (32,880 p.)

A walidacja 2 etapowa jest nie dobra?

1. Podczas uzupełniania (w JS)

2. Przy wysyłaniu formularza do serwera (w back-endzie)

Jest to prawidłowe, czy nie powinno się tak robić?

komentarz 11 czerwca 2018 przez Artek Stary wyjadacz (11,800 p.)

Uważam iż w walidacji 2 etapowej nie ma nic niewłaściwego.

komentarz 11 czerwca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Walidacja w JS u klienta ma przede wszystkim elegancko obsłużyć ewentualne błędy itp. i poinformować o tym usera, żeby nie strzelać niepotrzebnie błędnymi danymi do API.

Natomiast w API masz pełną walidację przed przesłaniem danych dalej, odpaleniem bazy itp.U klienta warto brać pod uwagę również możliwe, częste błędy i starać się o nich poinformować.