Jak zwalidować pole formularza używając wyrażeń regularnych?

Cześć. Mam taki problem. Muszę zwalidować formularz używająć czystego javascript i teraz głownym problem polega na tym że button ma być niedostępny jeśli wszystkie inputy nie są zwalidowane i teraz jeśli chodzi o inputy to potrafię je zwalidować używajac na każdym addEventListener ale nie wiem jak doprowadzic do stanu w którymś z każdego addEvenLlistenera dostanę wartościu boolean i póżniej jeśli wszytskie będą popranwe to zmienie buttona na button.disabled = false

Przemyśl, o co chcesz zapytać, bo temat pytania z treścią nijak się nie zgrywa.
Gdzie tu RegExp, a gdzie button.disabled = false?

Chodzi o to, że w formularzu mam cztery pola. Imię, nazwisko, email i textaree. Chce doprowadzic do sytuacji w której przycisk wyślij będzie dostępny dopiero wtedy kiedy wcześniejsze pola będa zvalidowane. i teraz używając ja każdym polu addEventListenera mogę włączyć przycisk po poprawnym zwalidowaniu. Ale nie wiem jak doprowadzić do sytuacji w której porównać jak by status walidacji na poszczególnym polu razem. chodzi mi o coś takiego https://www.encodedna.com/javascript/practice-ground/default.htm?pg=javascript_disabled_property1 . Ale nie używając tego patentu z "onkeyup" w htmlu bo to chyba zła praktyka.

zależy co chcesz osiągnąć:
onblur - kiedy kontrolka traci focus
oninput - kiedy kontrolka się zmienia
onchange - trochę tak, trochę inaczej: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
onsubmit - kiedy formularz ma być wysłany

Jak zwalidujesz poprawnie inputa, to dodajesz tam mu class validated_ok, która zmienia obwódkę inputu na zieloną gdy validacja się udała regexem.
najczęściej co każdy klawisz musisz tak sprawdzać lub po opuszczeniu pola.

I potem robisz jakąś funkcję, która sprawdza czy są 4 inputy w formularzu zweryfikowane poprawnie czyli z klasą, wtedy w htmelu przechowujesz informacje o walidacji.
Możesz też gdzieś stan w zmiennych javascript trzymać.
Tą funkcje możesz wywoływać po każdej walidacji regexem.

$$("input.validated_ok").length == 4 ? $("button#1").disabled = false : $("button#1").disabled = true

GodOfCode. napisał(a):

Jak zwalidujesz poprawnie inputa, to dodajesz tam mu class validated_ok, która zmienia obwódkę inputu na zieloną gdy validacja się udała regexem.
najczęściej co każdy klawisz musisz tak sprawdzać lub po opuszczeniu pola.

I potem robisz jakąś funkcję, która sprawdza czy są 4 inputy w formularzu zweryfikowane poprawnie czyli z klasą, wtedy w htmelu przechowujesz informacje o walidacji.
Możesz też gdzieś stan w zmiennych javascript trzymać.
Tą funkcje możesz wywoływać po każdej walidacji regexem.

$$("input.validated_ok").length == 4 ? $("button#1").disabled = false : $("button#1").disabled = true

dziękuje, zaraz siadam do tego i spróbuje to zaimplementować pochwale się jak się uda ;d

LukeJL napisał(a):

Przemyśl, o co chcesz zapytać, bo temat pytania z treścią nijak się nie zgrywa.
Gdzie tu RegExp, a gdzie button.disabled = false?

@mcbrewa:

Musisz sobie jaśniej stawiać przed oczy zagadnienia, problemy do rozwiazania. Bo wbrew tematowi niewiele potrzebujesz do WYRAŻEN REGULARNYCH, a przyjąć optymalny sposób wyegzekwowania skutkow tych wyrażeń, wybranie optymalnego eventu gdzie blokować.

cześć udało mi się w końcu (dzięki waszym podpowiedziom) zrealizować założenia https://codepen.io/mcbrewa/pen/NWePGMV . Może ktoś zerknąć xd? Na razie tylko działa tak jak chce tylko pole name i last name ale zaraz to wszytsko dokoncze xd.

mcbrewa napisał(a):

cześć udało mi się w końcu (dzięki waszym podpowiedziom) zrealizować założenia https://codepen.io/mcbrewa/pen/NWePGMV . Może ktoś zerknąć xd? Na razie tylko działa tak jak chce tylko pole name i last name ale zaraz to wszytsko dokoncze xd.

Odpowiednie eventy

Nie powinieneś używać

userName.addEventListener('keyup', (event)=>{

bo treść pola może się zmienić z innych powodów, niż kliknięcie. Ktoś mógł coś wyciąć, wkleić (skrótem albo myszką), mógł usunąć treść (niektóre przeglądarki mają przycisk do usuwania treści), mógł zrobić drag&drop zeby przenieśc treść z/do pola, i w ten sposób zmienić to co w nim jest. Przeglądarka mogła autouzupełnić pola przy otwarciu. Musiałbyś obsłużyć dużo więcej eventów.

Ciebie interesuje czy treść pola się zmieniła, więc powinieneś łapać 'change'.

Algebra boola

if(hasPositiveUserName&&hasPositiveUserLastName){
    btn.disabled = false;
}else{
    btn.disabled = true;
}

Można zamienić na:

btn.disabled = !(hasPositiveUserName && hasPositiveUserLastName);    

albo

btn.disabled = !hasPositiveUserName || !hasPositiveUserLastName

Riddle napisał(a):

Odpowiednie eventy

Nie powinieneś używać

userName.addEventListener('keyup', (event)=>{

bo treść pola może się zmienić z innych powodów, niż kliknięcie. Ktoś mógł coś wyciąć, wkleić (skrótem albo myszką), mógł usunąć treść (niektóre przeglądarki mają przycisk do usuwania treści), mógł zrobić drag&drop zeby przenieśc treść z/do pola, i w ten sposób zmienić to co w nim jest. Przeglądarka mogła autouzupełnić pola przy otwarciu. Musiałbyś obsłużyć dużo więcej eventów.

super wielkie dzięki za feedback