• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Walidacja formularza numer telefonu JavaScript

VPS Starter Arubacloud
0 głosów
3,746 wizyt
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

+1 głos
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.

0 głosów
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.
0 głosów
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ć.

Podobne pytania

0 głosów
1 odpowiedź 2,309 wizyt
pytanie zadane 21 października 2018 w JavaScript przez DinapeS Początkujący (350 p.)
0 głosów
2 odpowiedzi 1,399 wizyt
pytanie zadane 18 października 2018 w JavaScript przez drraco Początkujący (370 p.)
0 głosów
1 odpowiedź 261 wizyt
pytanie zadane 6 października 2018 w JavaScript przez Sobol3k Użytkownik (690 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...