Szép hibaüzenet

Ismét fontos, hogy egy példa erejéig megnézd miről is lesz szó.

Űrlapok. Nap mint nap találkozunk velük és egyre többen töltünk ki mindenféle információgyűjtő formokat.
Elküldés előtt az egyik legfontosabb dolog a kötelezően kitöltendő mezők kitöltöttségének leellenőrzése. Bár szerveroldalról is illik ezt figyelni, hogy pl. egy adatbázisba mentés előtt ne legyenek üres mezők (a kötelező mezőket értve persze) nagyon sokat segít rajtunk, ha még a post folyamat előtt leellenőrizzük ezen mezőket.
Az ellenőrzés feladata fontos számunkra és mostanában az is, hogy a hibaüzenet mennyire felhasználóbarát, mennyire szép.

Az alábbi példában egy ennek megfelelő scriptet szeretnék bemutatni, ami képes ellátni ezt a feladatot.
Természetesen a script nem tökéletes (nem lehet tökéletes:), de mindenképpen jó kiindulópont lehet sokak számára.)

Miért nem tökéletes?
Mert nincs benne a beviteli mezőnek megfelelő formátumellenőrzés (pl. email megfelelősség, a bevitt érték szám, vagy text, stb…)

A „program” úgy van megoldva, hogy lehetőleg minél kevesebb módosítással be lehessen illeszteni bármilyen oldalba. Ehhez a form.js, a nicemsg.css mindenképp szükséges és persze a megfelelő képek.

A szép üzenet háttérképe:

háttérkép

A szép üzenet bezárásgombja:

lezárás

A html forrás:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<!--  **************************
        Designed: Delawer
        2005
 
delawer@freemail.hu
      http://delawer.fw.hu/
    ****************************  -->
<HEAD>
  <TITLE>Szép hibaüzenet diszkréten</TITLE>
 
   <META http-equiv="content-type" content="text/html; charset=iso-8859-2" />
     <META http-equiv="description" content="" />
     <META http-equiv="keywords" content="" />
     <META http-equiv="generator" content="PSPad editor, www.pspad.com" />
     <META http-equiv="author" content="" />
 
   <META http-equiv="imagetoolbar" content="no" />
 
<LINK rel="stylesheet" type="text/css" href="css/style.css"  media="screen"/>
<LINK rel="stylesheet" type="text/css" href="css/nicemsg.css"  media="screen"/>
<SCRIPT src="js/forms.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<DIV id="errorWindow">
  <DIV id="errorClose"></DIV>
 
  <H2 id="h2_alert">Hibaüzenet cím</H2>
  <P id="errorMsg">Hibaüzenet</P>
</DIV>
    <H1>Ûrlap</H1>
 
      <FORM method="post" action="sendform.php" id="megrendelesform">
          <LABEL for="vezeteknev">Vezetékneve:</LABEL>
          <INPUT class="textinput required" maxlength="256" name="vezeteknev" id="vezeteknev" type="text" /><BR />
          <LABEL for="utonev">Utóneve:</LABEL>
 
          <INPUT class="textinput required" maxlength="256" name="utonev" id="utonev" type="text" /><BR />
          <LABEL for="szulhely">Születési hely:</LABEL>
          <INPUT class="textinput required" maxlength="256" name="szulhely" id="szulhely" type="text" /><BR />
          <LABEL for="szin">Kedvenc szín:</LABEL>
 
          <INPUT class="textinput required" maxlength="256" name="szin" id="szin" type="text" /><BR />
          <INPUT class="btn" id="send" value="Elküldés" type="submit" />
          <INPUT class="btn" value="Törlés" type="reset" />
      </FORM>
</BODY>
</HTML>

A html forrásban látható egy errorWindow id-jű div, ez fog megjelenni a hibaüzenet aktiválásakor), alapesetben nem jelenik meg (lásd a css-t).
Továbbá a required class-ú inputmezők lesznek azok, melyeket kötelező érvényűen kell kitölteni.

A hozzá tartozó javascript forrása: A scriptünk sokkal bonyolultabb már.
Ami fontos, és ha visszakanyarodunk a html forrásunkra észre is vesszük, a html kódban nincs eseménylekezelés.
A diszkrét javascript egyik lényeges momentuma, hogy nem „szemeteli” tele a html kódot, a másik, hogy scriptfuttatás nélkül is menjen az oldal és lehetőleg helyesen, hiba nélkül jelenjen meg az oldalunk.
Az eseménykezelést az addEvent() függvényünk végzi, „elkapja” az eseményt és igyekszik lekezelni azt.
Ha clikk esemény történik és a klikk eseményt kiváltó elem egy submit elem (fontos, hogy ez a submit input rendelkezzen id-vel), megkeresi a szülő formot (szintén rendelkezzen id-vel) és szimulálja a form onsubmit eseményét, elküldi a formHandler() függvénynek.
A függvény leellenőrzi az adott formot és végigmegy annak input elemein (text, textarea, select, de lehetne még checkbox illetve radio is), megvizsgálja, hogy kötelezően kitöltendő osztályba soroltuk-e és ennek megfelelően megy tovább.
Ha kitöltendő mezőről van szó és az üres lenne, akkor megjelenít egy hibaüzenet, megállítja az onsubmit-ot, ellenkező esetben megy tovább az onsubmit.

/*
 developed: Delawer(c) 
*/
 
/* szép hibaüzenet szövegek szekció */
var msgId =new Array();
var msgTitle =new Array();
msgTitle['vezeteknev']='Adja meg vezetéknevét!';
msgId['vezeteknev']='Kérjük adja meg vezetéknevét';
msgTitle['utonev']='Adja meg utónevét';
msgId['utonev']='Kérjük írja be utónevét';
msgTitle['szulhely']='Hol született?';
msgId['szulhely']='Kérjük adja meg születési helyét';
msgTitle['szin']='Kedvenc színe?';
msgId['szin']='Írja be kedvenc színét, hogy termékünk passzoljon ízléséhez';
 
function addEvent(obj, evType, fn)
{
  if (obj.addEventListener)
  {
    obj.addEventListener(evType, fn, true);
    return true;
  }
  else if (obj.attachEvent)
  {
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else
  {
    return false;
  }
}
 
/* szép hibaüzenet szövegek szekció vége */
 
var _focused;
 
function nicePopupHidden(ev)
{
  ev || (ev = document.event);
  sender = ev.srcElement ? ev.srcElement : ev.target;
  if (sender.id=='errorClose')
  {
    document.getElementById('errorWindow').style.display='none';
    _focused.focus(); // visszaadjuk a fókuszt az üres/hibás mezõbe
  }
}
 
function getTopPos(inputObj)
  {
 
    var returnValue = inputObj.offsetTop;
    while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
    return returnValue;
  }
 
function getLeftPos(inputObj)
  {
    var returnValue = inputObj.offsetLeft;
    while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
    return returnValue;
  }
 
function niceMsg(azon)
{  
  var posX=-150;
  var posY=-19;
  _src=document.getElementById(azon);
  _focused=_src; //globális változóba tesszük az éppen aktuális mezõt, ahová majd visszafókuszálunk 
  var errorWindow=document.getElementById('errorWindow');
  document.getElementById('h2_alert').innerHTML=msgTitle[azon];
  document.getElementById('errorMsg').innerHTML=msgId[azon];
  errorWindow.style.left=(getLeftPos(_src)+posX)+'px';
  errorWindow.style.top=(getTopPos(_src)+posY)+'px';
  errorWindow.style.display='block';
  errorWindow.style.display='block';
  return false;
}
 
function formHandler(_form)
{
  var _hibas='';
  var required=false;
  for (i=0;i&amp;lt;_form.length ;i++ )
  {
    _hibas='';
    required=_form[i].className.indexOf('required')>0;
    switch(_form[i].type) 
      {
        case 'text': if(_form[i].value=='' &amp;&amp; required) _hibas=_form[i].id;break;
        case 'textarea': if(_form[i].value=='' &amp;&amp; required) _hibas=_form[i].id;break;
        //case 'checkbox':  (_form[i].checked) ;break;
        case 'select-one': if(_form[i].value=='null' &amp;&amp; required)_hibas=_form[i].id ;break;
      }
    if (_hibas.length>0) break;
  }
  if (_hibas.length==0) 
    {
      return true;
    }
  else 
    {
      niceMsg(_hibas);
      return false;
    }
}
 
function formParent(elem)  // adott submit(object típusú) szülõ form objectumával tér vissza
  {
    var _parentForm=document.getElementById(elem.id).parentNode;
    var i=1;
    while (_parentForm.nodeName!='FORM')
    {
      i++;
      _parentForm=_parentForm.parentNode;
    }
    return _parentForm;
  }
 
function submitHandler(ev)  //submit lekezelés
{
  ev || (ev=window.event);  
  var sender;
  sender = ev.srcElement ? ev.srcElement : ev.target;  
 
  _parentForm=formParent(sender);
  if(_parentForm.method=='post' &amp;&amp; sender.type=='submit')
  {    
    if (formHandler(_parentForm)) _parentForm.submit();
  }
 
  if (ev.preventDefault) 
   {
    ev.preventDefault(); ev.stopPropagation();
   }
  else 
  {
    ev.cancelBubble = true; ev.returnValue = false;
  }
  return false;
}
 
function classMousedownHandler(ev) {
  ev || (ev=window.event);  
  var sender;
  sender = ev.srcElement ? ev.srcElement : ev.target;  
 
  if (sender.getAttribute("type")=="submit")
    {
    addEvent(sender,'click', submitHandler);
    }    
}
 
addEvent(document, 'mousedown', classMousedownHandler);
addEvent(document, 'click', nicePopupHidden);

CSS kód:

#errorWindow {
  background: url(../i/alert_bg.png) no-repeat left top;
  width: 350px;
  height: 80px;
  position: absolute;
  display: none;
  border: 0px solid #800;
  z-index: 1000;
}
 
#errorMsg {
  position: relative;
  top: 27px;
  left: 5px;
  width: 340px;
  color: #000;
  font: 12px Tahoma;
  text-align: center;
}
 
#errorClose {
  position: absolute;
  left: 324px;
  top: 0px;
  background: url(../i/alert_bezar.png) no-repeat left top;
  border: 0px;
  width: 26px;
  height: 16px;
  cursor: pointer;
}
 
#h2_alert {
  color: #FFF;
  font-size: 12px;
  font-weight: bold;
  font-family: Tahoma;
  position: absolute;
  top: 1px;
  left: 10px;
  text-decoration: none;
  padding: 0px;
  margin: 0px;
}
#h2_alert:first-letter {
  color: #FFF;
  font-size: 12px;
}

Írta: Delawer
Forrás: http://www.freeweb.hu/delawer/

Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét