Sidebar validáció
2016-08-21T23:30:10+02:00
2016-08-22T20:22:39+02:00
2022-07-19T06:55:47+02:00
quovadis
Üdv. Mindenkinek!

LINK A KÓDHOZ

Egy olyan problémám lenne, hogy validálni szeretnék az oldalsávban. A validálás onblur eseményre történik, tehát amikor a felhasználó elveszíti a fókuszt. Ekkor a sidebar-on megjelenik a hiba helyén egy nyíl és egy figyelmeztető üzenet. Ezt meg is csináltam, szépen pozicionál és a hibaüzenet szövegét is cserélem, de két ponton elakadtam és nem tudok tovább jutni. 

Az első, hogy ha egy valid mezőre kattintok, majd onnan ki kattintok, akkor ne történjen semmi, azaz ne tűnjön el a hibaüzenet, hanem tartsa meg az utolsó hiba állapotot.

A másik, hogy ha minden mező valid, akkor jobb oldalt jelenjen meg egy olyan üzenet, ami arról tájékoztatja a felhasználót, hogy minden rendben van.

Ha valaki írna erre nekem a két esetre egy magoldást  azt nagyon megköszönném.

Üdv.
Mutasd a teljes hozzászólást!
ha már valid mezőről kikattintok (nem input-ra)

Mivel az ellenőrzés az onblur eventre történik ezért azt kellene még azonosító alapján vizsgálni, hogy melyik elemre (pl. select-ekre) klikkelsz-e át, azaz a fókusz milyen elemen van és azt is figyelembe venni az üzenet elrejtésekor...
Bár én nem foglalkoznák-nék "evvel a problémával" ...
A "minden OK"-ra, pedig egy javasolt átalakítás ->

function $(id) { return document.getElementById('id'); } var sidebarArrow = document.querySelector('.arrow'), main = document.querySelector('.main'), errorBox = document.querySelector('.errorBox'), errorHeader = document.querySelector('.errorHeader'), successHeader = document.querySelector('.successHeader'), validates = document.querySelectorAll('.validate'), errorBorder = document.querySelectorAll('.errorBorder'); var validateArray = []; validateArray['name'] = false; validateArray['email'] = false; validateArray['phone'] = false; validateArray['tax'] = false; validateArray['zip'] = false; for(var i = 0; i < validates.length; i++) { var validate = validates[i]; validate.onblur = function(event) { var obj = this; var input_name = obj.getAttribute("name"); var errorText = obj.nextElementSibling.innerHTML; var mainPosition = main.getBoundingClientRect(); var mainTop = mainPosition.top; var objPosition = obj.getBoundingClientRect(); var objTop = objPosition.top - mainTop; var sidebarArrowHeight = sidebarArrow.offsetHeight; var sidebarArrowMiddle = sidebarArrowHeight / 2; var errorBoxHeight = errorBox.offsetHeight; var errorBoxMiddle = errorBoxHeight / 2; var errorBoxDistance = errorBoxMiddle - sidebarArrowMiddle var errorBoxTop = objTop - errorBoxDistance; if(obj.value === null || obj.value === '') { sidebarArrow.style.top = objTop + 'px'; errorBox.style.top = errorBoxTop + 'px'; sidebarArrow.classList.add('show'); errorBox.classList.add('show'); obj.classList.add('errorBorder'); errorHeader.innerHTML = errorText; validateArray[input_name] = false; } else { sidebarArrow.classList.remove('show'); errorBox.classList.remove('show'); obj.classList.remove('errorBorder'); validateArray[input_name] = true; } if ( validateArray['name'] && validateArray['email'] && validateArray['email'] && validateArray['phone'] && validateArray['tax'] && validateArray['zip'] ) { sidebarArrow.style.top = objTop + 'px'; errorBox.style.top = errorBoxTop + 'px'; sidebarArrow.classList.add('show'); errorBox.classList.add('show'); obj.classList.add('errorBorder'); errorHeader.innerHTML = 'Kitöltés rendben'; // ide jöhet a submit gomb engedélyezése } } }
Mutasd a teljes hozzászólást!

  • A validálás onblur eseményre történik, tehát amikor a felhasználó elveszíti a fókuszt. .

    1. Nem a felhasználón volt a főkusz, hanem az adott elemen...

    ha egy valid mezőre kattintok, majd onnan ki kattintok, akkor ne történjen semmi, azaz ne tűnjön el a hibaüzenet

    2. Melyik eseményre történik a validálás? Nincs itt ellentmondás? Mellesleg a ciklusban lévő IF-nek van ELSE ága is...

    ha minden mező valid, akkor jobb oldalt jelenjen meg egy olyan üzenet,

    3. Akkor a következő tömböt -> var validateArray = [] -> a ciklusban fell kellene tölteni true vagy false értékekkel (ha az IF ágban rossz, akkor false, ha az ELSE ágban az adott elem jó, akkor true), majd a ciklus után végiglépve rajta -> ha minden eleme true, akkor rendben a kitöltés és jöhet a minden rendben kiírás, azaz/és akkor engedélyezni a submit gomb működőképességét (disabled)...
    Mutasd a teljes hozzászólást!
  • Köszönöm a választ!

    Nem fogalmaztam a legjobban. Van egy olyan eset, amikor nem kellene eltűnnie a hibaüzenetnek. Ha rakattintok egy üres mezőre majd abból kikattintok, akkor ugye oldalt megjelenik a hiba üzenet. Viszont ha ezután, belekattintok egy mar kitöltött mezőbe es onnan kikattintok egy üres területre (nem input-ra), akkor eltűnik a hibaüzenet. Sajnos ez igy működik, mert igy tudtam megírni. Erre az esetre egy olyan megoldás kellene h ha már valid mezőről kikattintok (nem input-ra) és mar korábbról látszott az utolsó hibás mező hibaüzenete ne történjen semmi, vagy ne törlődjön a hibaüzenet.
    Mutasd a teljes hozzászólást!
  • ha már valid mezőről kikattintok (nem input-ra)

    Mivel az ellenőrzés az onblur eventre történik ezért azt kellene még azonosító alapján vizsgálni, hogy melyik elemre (pl. select-ekre) klikkelsz-e át, azaz a fókusz milyen elemen van és azt is figyelembe venni az üzenet elrejtésekor...
    Bár én nem foglalkoznák-nék "evvel a problémával" ...
    A "minden OK"-ra, pedig egy javasolt átalakítás ->

    function $(id) { return document.getElementById('id'); } var sidebarArrow = document.querySelector('.arrow'), main = document.querySelector('.main'), errorBox = document.querySelector('.errorBox'), errorHeader = document.querySelector('.errorHeader'), successHeader = document.querySelector('.successHeader'), validates = document.querySelectorAll('.validate'), errorBorder = document.querySelectorAll('.errorBorder'); var validateArray = []; validateArray['name'] = false; validateArray['email'] = false; validateArray['phone'] = false; validateArray['tax'] = false; validateArray['zip'] = false; for(var i = 0; i < validates.length; i++) { var validate = validates[i]; validate.onblur = function(event) { var obj = this; var input_name = obj.getAttribute("name"); var errorText = obj.nextElementSibling.innerHTML; var mainPosition = main.getBoundingClientRect(); var mainTop = mainPosition.top; var objPosition = obj.getBoundingClientRect(); var objTop = objPosition.top - mainTop; var sidebarArrowHeight = sidebarArrow.offsetHeight; var sidebarArrowMiddle = sidebarArrowHeight / 2; var errorBoxHeight = errorBox.offsetHeight; var errorBoxMiddle = errorBoxHeight / 2; var errorBoxDistance = errorBoxMiddle - sidebarArrowMiddle var errorBoxTop = objTop - errorBoxDistance; if(obj.value === null || obj.value === '') { sidebarArrow.style.top = objTop + 'px'; errorBox.style.top = errorBoxTop + 'px'; sidebarArrow.classList.add('show'); errorBox.classList.add('show'); obj.classList.add('errorBorder'); errorHeader.innerHTML = errorText; validateArray[input_name] = false; } else { sidebarArrow.classList.remove('show'); errorBox.classList.remove('show'); obj.classList.remove('errorBorder'); validateArray[input_name] = true; } if ( validateArray['name'] && validateArray['email'] && validateArray['email'] && validateArray['phone'] && validateArray['tax'] && validateArray['zip'] ) { sidebarArrow.style.top = objTop + 'px'; errorBox.style.top = errorBoxTop + 'px'; sidebarArrow.classList.add('show'); errorBox.classList.add('show'); obj.classList.add('errorBorder'); errorHeader.innerHTML = 'Kitöltés rendben'; // ide jöhet a submit gomb engedélyezése } } }
    Mutasd a teljes hozzászólást!
  • Köszi! 
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd