input type="text" jak select

pytanie zadane 2 marca 2018 w HTML i CSS przez Bartess Gaduła (3,630 p.)

Cześć.
Ze względu na sposób pracy (wprowadzanie tekstu w pole formularza czytnikiem kodów kreskowych) potrzebuję wprowadzać treść w polu text, ale tylko z dostępnej puli, jak w polu typu select (nie można formularzem przesłać kodu uprzednio nie dodanego do bazy danych).
Umiem zrobić sprawdzenie z poziomu PHP, a czy da się to sprawdzić jeszcze w przeglądarce przed wysłaniem formularza?

3 odpowiedzi

odpowiedź 2 marca 2018 przez Tomek Sochacki Ekspert (227,490 p.)
wybrane 2 marca 2018 przez Bartess

Najlepsza

nie można formularzem przesłać kodu uprzednio nie dodanego do bazy danych

a dużo masz tych kodów? Jeśli tak, to nie polecałbym wyrażeń regularnych bo nie jest to najwydajniejsza opcja i może być trudna w utrzymaniu. A może rozważyć np. pobranie do aplikacji wszystkich kodów na początku, zapisanie ich w zmiennej (JS - array) i podczas wprowadzenia kodu sprawdzenie, czy wprowadzony kod istnieje w tej zmiennej (np. tablicy). Jeśli nie istnieje to wywala błąd aby sprawdzić czy kod został dobrze wprowadzony i blokuje możliwość wysłania itp. lub np. informacja o braku kodu w bazie i pytaniu czy ma on zostać wprowadzony jako nowy (to już zależy od logiki aplikacji i tego co w zasadzie ma być tu robione).

Takie rozwiązanie pozwoliłoby uniknąć częstych zapytań do bazy, co może mieć znaczenie np. jeśli chcesz szybko wprowadzać różne dane. Nie ryzykujemy np. opóźnienia odpowiedzi itp. Jednocześnie minimalizujemy ilość zapytań typu insert do kodów, które faktycznie istnieją - oczywiście drugą walidację trzeba by przeprowadzić na serwerze ale tam jest to szybsze bo nie ma etapu komunikacji klient-serwer-baza.

W dość łatwy sposób można by też machnąć np. podpowiedzi dla zbliżonych kodów itp.

Pytanie też np. ile osób jednocześnie może pracować na apce, a dokładniej ile osób może jednocześnie wprowadzać nowe kody, które powinny być wtedy przesłane do klientów. Można by tu np. pomyśleć o WebSocket czy Server Event itp. Wszystko zależy od wielu czynników jak ilość klientów, ilość danych w bazie, częstotliwość ich wprowadzania i testowania itp. bo jeśli np. wprowadzasz dane w większych odstępach czasu to można pozostać przy Ajax... musiałbyś podać więcej szczegółów.

komentarz 2 marca 2018 przez Bartess Gaduła (3,630 p.)

Nowe „wzorce” będą dodawane osobno, w innym miejscu na poziomie 1 na dzień-dwa. Będzie ich nie więcej niż 100 (stare będą dezaktywowane). W formularzu wartości będą tylko pobierane z BD.
Jakaś podpowiedź jak to zrobić w JS?

komentarz 2 marca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

No to może tak jak pisałem - pobrać dane przy wczytywaniu apki i potem pracować na danych zapisanych lokalnie u usera i wysyłać do serwerka tylko dane zgodne z pobraną listą kodów.

Kwestia jeszcze zabezpieczenia się przed sytuacją, gdy np. dodasz teraz nowy kod do bazy, a user nie ma go bo wczytał apkę wcześniej (np. 5 minut wcześniej). Jeśli istnieje takie ryzyko to można np. zrobić jakieś cykliczne zapytania i ewentualne aktualizacje danych przy użyciu Ajax.

Albo jeśli jest małe ryzyko takiego przypadku to np. w razie próby wpisania kodu nie znajdującego się u klienta w tablicy wywalić błędem i propozycją sprawdzenia (np. "Aktualizuj bazę kodów" itp.). Pozwoli to w razie takiego przypadku zrobić ręcznego Ajax'a i zapytanie do bazy, po czym zwrócona zostanie aktualna lista kodów.

Rozwiązań jest parę, ale ja bym wyszedł właśnie od idei trzymania kodów u usera i ich odpowiedniej aktualizacji.

A jak to zrobić dokładnie to już zależy m.in. od back-endu, inaczej nieco pobiera się dane z bazy i wysyła JSONem w PHP, a inaczej w node itp. Ale to już kwestia na osobny wątek na temat pobierania danych z bazy itp.

odpowiedź 2 marca 2018 przez arces Pasjonat (17,700 p.)

Spróbuj skorzystać z atrybutu pattern dla inputów. Powinno wystarczyć.

komentarz 2 marca 2018 przez Bartess Gaduła (3,630 p.)
edycja 2 marca 2018 przez Bartess

Przykłady znalazłem takie jak to: pattern="[A-Za-z]{3}"
Znalazłem też coś takiego:
<input type="text" name="Name" pattern="krowa|osioł|kura|baran" required>

komentarz 2 marca 2018 przez arces Pasjonat (17,700 p.)

Poczytaj o wyrażeniach regularnych i znajdziesz rozwiązanie :)

komentarz 3 marca 2018 przez Bartess Gaduła (3,630 p.)

Pojawił się kolejny problem.. Otóż we wzorcu mogą pojawić się te same wartości dla 2 różnych puli danych, ale wartości, które są w bazie danych pod 1 różnymi indeksami.
W skrócie mam w bazie:

id pula opis
1 A 123
2 A 456
3 A 789
4 B 098
5 B 123

Element o indeksie 1 i 5 mają identyczną wartość w, ale są w 2 różnych pulach. Dla pola SELECT OPTION problemu nie ma, bo element jest przesyłany w value jako index z BD. Jak to rozwiązać w polu tekstowym?

odpowiedź 2 marca 2018 przez PaulGilbert Gaduła (3,280 p.)

Ja robiłem trochę inną rzecz, bo mi chodziło bardziej o autouzupełnianie, ale wykorzystałem wtedy chyba wczytanie danych z pliku JSON. Myślę, że taki plik możesz wykorzystać zamiast bazy jeżeli nie będzie tego bardzo dużo.

komentarz 2 marca 2018 przez Bartess Gaduła (3,630 p.)

„Wzorców” będzie nie więcej niż 100.
Pytanie za 100 pk.: jak to zrobić?

komentarz 2 marca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Sto elementów to spokojnie podczytaj sobie do klienta od razu w ramach SSR lub po załadowaniu odpowiedzi z serwerka puść Ajax i podgraj te dane - najlepiej będzie pobrać je jako JSON a dalej w JS ja bym je obrabiał jako tablicę. Miałbyś wtedy np. proste Array.prototype.includes( kod ) i po sprawie. 100 elementów to nie jest jakaś ogromna tablica i raczej nie będzie problemu z wydajnością.