Diskuze: Validace formuláře

JavaScript JavaScript Validace formuláře

Avatar
lukes90
Člen
Avatar
lukes90:

Ahoj chtěl bych se zeptat co je špatně na kódu

function validate(f) {
var poslat=false;
var pr = document.getE­lementById("pr")­.value;
var em = document.getE­lementById("em")­.value;
var po = document.getE­lementById("po")­.value;

if (poslat==false) {
alert("vyplň červená pole");
}

if (po!="")&& (em!="") && (po!="" )
{
poslat=true;
}

return (poslat);

}

A ještě bych se chtěl zeptat jak obarvit prázdné pole.

Díky za odpověď.

 
Odpovědět 28.12.2015 21:20
Avatar
lukes90
Člen
Avatar
lukes90:

<SCRIPT LANGUAGE="JavaS­cript"> <!--
function validate(f) {
var poslat=false;
var pr = document.getE­lementById("pr")­.value;
var em = document.getE­lementById("em")­.value;
var po = document.getE­lementById("po")­.value;

if ((po!="")&& (em!="") && (po!="" ) )
{
poslat=true;
}

if (poslat==false) {
alert("vyplň červená pole");
}

return (poslat);

} // -->
</script> upravil jsem ho, ale nevím jak mám obarvit prázdná pole.

 
Nahoru Odpovědět 28.12.2015 21:54
Avatar
IT Man
Redaktor
Avatar
IT Man:

Prosím, nejprv vlož kód do značek code.

Nahoru Odpovědět  +2 28.12.2015 22:17
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
lukes90
Člen
Avatar
lukes90:
<SCRIPT LANGUAGE="JavaScript"> <!--
function validate(f) {
var poslat=false;
var pr = document.getElementById("pr").value;
var em = document.getElementById("em").value;
var po = document.getElementById("po").value;

if ((po!="")&& (em!="") && (po!="" ) )
{
poslat=true;
}

if (poslat==false) {
alert("vyplň červená pole");
}

return (poslat);

} // -->
</script>
 
Nahoru Odpovědět 28.12.2015 22:30
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na lukes90
Taskkill:

Prvni vec co se mi nelibi, ze to evidentne trci nekde v html souboru, to asi slyset nechces. Pak by se tu dalo udelat neco prace do semantiky a nejake te programatorske estetiky. Jestli se ale ptas na neco konkretniho, mel bys dotaz specifikovat, rekneme, funkce nedela co ma, nebo nekdo mi rekl, ze je ta funkce hnus, co s tim? Nebo neco jineho? Ano je to bida, ale jestli to napsal skriptar zacatecnik a je to do mensiho projektiku, tak bych to nehrotil. Ale zlepsovat by se to chtelo.

PS: Nechapu vyznam tech html komentaru, to snad ani nema vyznam. A language v tagu script je dneska uz taky trochu vtip, vzdyt v cem jinym by ten script na webu mohl bejt psanej :) .

 
Nahoru Odpovědět 28.12.2015 23:07
Avatar
lukes90
Člen
Avatar
Odpovídá na Taskkill
lukes90:

Dotaz byl, jak obarvit ty pole, když nebudou vyplněná. Jestli tě napadá, jak to vylepšit, tak jen do mě :-). (Do externího souboru to pak přesunu.)

 
Nahoru Odpovědět 28.12.2015 23:31
Avatar
Alesseon
Člen
Avatar
Odpovídá na lukes90
Alesseon:

Do exterňáku to určitě přesuň pokud to bude mít nějakou aplikaci na více stránkách.. Pokud ovšem to bude jen tady tak nevidím problém proč by to tam nemohlo zůstat spíš v tom vidím výhody.

Nejprve si ujasni co k tomu vlastně potřebuješ. Začni tím že místo přiřazování value do proměnné si tam přiřaď rovnou celý objekt ať s ním pak můžeš snadno pracovat když ho stejně potřebuješ.

Jen pro ukázku:

if(pr.value == "") {
        pr.style.backgroundColor("red");
        poslat = true;
}
...

http://www.w3schools.com/…undcolor.asp

Nahoru Odpovědět 29.12.2015 1:36
This is a bad day to be human...
Avatar
Alesseon
Člen
Avatar
Odpovídá na Taskkill
Alesseon:

Prvni vec co se mi nelibi, ze to evidentne trci nekde v html souboru, to asi slyset nechces.

Nevidím jediný důvod proti proč by to tam nemohlo zůstat. Spíš v tom vidím výhody, když ten script nepotřebuješ ještě jinde.. Přeci jen, co je jednodušší načíst si jeden soubor nebo dva soubory? A argument že když už ten soubor budu stejně načítat tak to tam taky přihodit - potřebuju to snad jinde? Proč bych to tam teda měl cpát? To to tam nemůže prostě zůstat abych s tím neoxidoval jinde?

Samozřejmě ale pro všechny - naučit se rozeznávat co ještě jo a co už ne. Třeba krátký validační skriptík není důvod ho tam nenechat ale jakmile se rozroste nebo jich tam bude hromada a bylo by to nepřehledné už to stojí za zvážení.

Pak by se tu dalo udelat neco prace do semantiky a nejake te programatorske estetiky.

Nechápu jak sem zapadá tohle ale ok..

Jestli se ale ptas na neco konkretniho, mel bys dotaz specifikovat, rekneme, funkce nedela co ma, nebo
nekdo mi rekl, ze je ta funkce hnus, co s tim? Nebo neco jineho? Ano je to bida, ale jestli to napsal skriptar
zacatecnik a je to do mensiho projektiku, tak bych to nehrotil. Ale zlepsovat by se to chtelo.

Ten začátek, on přesně specifikoval co ho trápí, dokonce dvě věci - co si o tom myslíte a druhá - jak obarvit ten kus toho prvku?
Zlepšovat je vždycky co a jestli říkáš že ne tak na můj příspěvek zapomeň a raději to neřeš.

PS: Nechapu vyznam tech html komentaru, to snad ani nema vyznam.

Taky ještě nechápu význam toho proč někdo používá XP či Internet explorer.. Ale máš pravdu, v rámci odstranění těchto prohlížečů z uživatelského repertoáru je lepší je tam nedávat.
Avšak bývalo jeden čas hodně důležité mít je tam.

A language v tagu script je dneska uz taky trochu vtip, vzdyt v cem jinym by ten script na webu mohl bejt
psanej :) .

Uznávám že většina scriptů se dneska už píše v JavaScriptu ale není pravda že neexistují jiné možnosti jako v případě CSS.

Nahoru Odpovědět 29.12.2015 1:49
This is a bad day to be human...
Avatar
lukes90
Člen
Avatar
Odpovídá na Alesseon
lukes90:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Fratres in Armis</title>
  <link href="vzhled.css" type="text/css" rel="stylesheet">

  <SCRIPT>
        function validate(f) {
          var poslat=false;
          var pr = document.getElementById("pr");
          var em = document.getElementById("em");
          var po = document.getElementById("po");

           if(pr.value == "") {
                                 pr.style.backgroundColor("red");
                                 poslat = false;
                              }
          else{ pr.style.backgroundColor("white");
                }

         if(em.value == "") {
            pr.style.backgroundColor("red");
            poslat = false;
            else{ em.style.backgroundColor("white");
              }
                            }

        if(po.value == "") {
                  pr.style.backgroundColor("red");
                  poslat = false;
                        }
          else{ po.style.backgroundColor("white");
              }



          if ((po.value!="")&& (em.value!="") && (po.value!="" ) )
               {
                  poslat=true;
                }
            else
                {
                poslat=false;

                }

      return (poslat);


    }
     </script
  </head>
  <body>
     <header>
      <div id="logo"><img src="obrazky\logo.jpg"  alt="Fratres in Armis" >   </div>
         <div id="nadpis"><h1>Fratres in Armis</h1>  </div>
</header>


         <article>
 <nav>
<ul>

<li><a href="index.html">O nás</a> </li>
 <li><a href="akce.html">Akce</a>  </li>
 <li><a href="fotogalerie.html">Fotogalerie</a></li>
 <li><a href="kontakty.html">Kontakty</a><br>
 <li  class="aktivní"><a href="poradatele.html">Pro pořadatele</a>   </li>
         </ul>
         </nav>

        <section>
  <h2>Pro pořadatele</h2>

  <p>Pořádáteli nějakou akci a chtěli byjste nás na ní pozvat použíjte formulář níže,
  nebo použíjte, některý kontakt ze sekce kontaktů. </p>

 <form method="post" onSubmit="return validate(this)" id="formular1" >
        <label for="jm">Jméno:</label><input id="jm" type="text" name="jmeno"><br>
        <label for="pr">Přijmení*:</label><input id="pr" type="text" name="prijmeni"><br>
        <label for="em">E-mail*: </label><input id="em" type="email" name="email"><br>
        <label for="te">Telefon:</label><input id="te" type="tel" name="telefon" ><br>
        <label for="arrival-time">Datum:</label><input id="arrival-time" name="arrival-time " type="datetime-local"> <br>
        <label for="po">Popis:</label><textarea id="po" name="komentar" rows="5" cols="40" placeholder="Zde nám prosím popište stručně akci, na kterou nás zvete.*"></textarea>   <br>
        <input type="submit" name="odeslat">  <input type="reset" name="smazat">

</form>


    </section>
   <div class="cistic"></div>
   </article>
   </div>
  <footer>
   Vytvořil &copy;Lukeš 2015 pro <a href="index.html">Fratres in Armis.CZ</a>
  </footer>

   </body>
</html>

Mám to takhle, ale vůbec mi to nefunguje.

 
Nahoru Odpovědět 29.12.2015 11:13
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na lukes90
Taskkill:

To jsem prehledl, promin. :) nejak jsem se ztratil v zaplave tech zdrojaku, nicmene :

tak jsem ti to projel ( abych ti vynahradil, ze jsem prehlidl, co vlastne chces )

mas tam nekolik chybicek, prvni byla primo v javascriptu, nejaky spatny zavorky a proto ti to nefungovalo, na tohle ti doporucuju tu stranku otevrit v prhlizeci, a stisknout F12, otevre se ti takovej nastroj, kde najdes slovo konzole, console, nebo jak to mas, tam se zobrazujou chyby, treba ve Firefoxu mi to reklo, ze mas v podstate syntax chybu v te funkci.

Navic !!! backgroundColor ani color nebo cokoliv neni funkce, toho kdo ti to poradil si jeste vezmu na paskal :D ( jen zert ) je to read/write hodnota takze se do ni pise takhle
backgroundColor = "red".

Pak k tomu formu, davat funkci validate parametr this je zbytecny, protoze ty pak stejne lovis ty veci podle ID... k tomu formu jeste, nezapomen tam pak hodit action="" a dovnitr nejakej php ( treba ) script, aby melo co prijmout ta data z formulare.

A nakonec, mel jsi tam nekde v tom js chybku ohledne "po" , pouzival jsi ho i tam kde uz melo byt uzito jine polozky. A ta posledni podminka je zbytecna, kdyz se dostanes nakonec, tak uz nemusis overovat vsechno znova.

Takhle to funguje:
nezapomen si to pak sformatovat, pac takhle se to cist skoro neda :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Fratres in Armis</title>
  <link href="vzhled.css" type="text/css" rel="stylesheet">
<SCRIPT>
        function validate() {
          var poslat=false;
          var pr = document.getElementById("pr");
          var em = document.getElementById("em");
          var po = document.getElementById("po");

           if(pr.value == "") {
                                 pr.style.backgroundColor = "red";
                                 poslat = false;
                              }
          else{
pr.style.backgroundColor = "white";
                }

         if(em.value == "") {
            em.style.backgroundColor = "red";
            poslat = false;
}
            else{
em.style.backgroundColor = "white";
}

        if(po.value == "") {
                  po.style.backgroundColor = "red";
                  poslat = false;
                        }
          else{ po.style.backgroundColor = "white";
              }

      return (poslat);


    }
     </script>
  </head>
  <body>

     <header>
      <div id="logo"><img src="obrazky\logo.jpg"  alt="Fratres in Armis" >   </div>
         <div id="nadpis"><h1>Fratres in Armis</h1>  </div>
</header>


         <article>
 <nav>
<ul>

<li><a href="index.html">O nás</a> </li>
 <li><a href="akce.html">Akce</a>  </li>
 <li><a href="fotogalerie.html">Fotogalerie</a></li>
 <li><a href="kontakty.html">Kontakty</a><br>
 <li class="aktivní"><a href="poradatele.html">Pro pořadatele</a>   </li>
         </ul>
         </nav>

        <section>
  <h2>Pro pořadatele</h2>

  <p>Pořádáteli nějakou akci a chtěli byjste nás na ní pozvat použíjte formulář níže,
  nebo použíjte, některý kontakt ze sekce kontaktů. </p>

 <form method="post" onsubmit="return validate()" id="formular1" >
        <label for="jm">Jméno:</label><input id="jm" type="text" name="jmeno"><br>
        <label for="pr">Přijmení*:</label><input id="pr" type="text" name="prijmeni"><br>
        <label for="em">E-mail*: </label><input id="em" type="email" name="email"><br>
        <label for="te">Telefon:</label><input id="te" type="tel" name="telefon" ><br>
        <label for="arrival-time">Datum:</label><input id="arrival-time" name="arrival-time " type="datetime-local"> <br>
        <label for="po">Popis:</label><textarea id="po" name="komentar" rows="5" cols="40" placeholder="Zde nám prosím popište stručně akci, na kterou nás zvete.*"></textarea>   <br>
        <input type="submit" name="odeslat">  <input type="reset" name="smazat">

</form>


    </section>
   <div class="cistic"></div>
   </article>
   </div>
  <footer>
   Vytvořil &copy;Lukeš 2015 pro <a href="index.html">Fratres in Armis.CZ</a>
  </footer>

   </body>

</html>
 
Nahoru Odpovědět 29.12.2015 12:19
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Alesseon
Taskkill:

Prvne chci rict, ze si dost zakladam na faktu, ze nejsem ten egoistickej machirek, takze jsem to fakt nemyslel zle, cokoliv jsem rikal! Taky bylo pozde (uz jsem nedaval pozor, tak jsem prehledl v te zaplave nezformatovaneho kodu ten dotaz na obarveni) ale ty mas dostatecne vysokej skill na to abych s tebou hovoril jako s profesionalem (trochu zostra jako starej kamos :) )...takze zacnu a pujdu bod po bodu...

  1. Obtruzivni a neobtruzivni javascript je pojem? Zasadne dodrzuj pravidla psani kodu, jestli se reklo, ze cpat to do indexu uprostred html je humus a budou se za to zkracovat prsty, tak se to bude dodrzovat. Kord u funkce na validaci formulare, kera se na stopro bude rozrustat, pokud ma byt neceho schopna.
  2. Semantika a estetika, logika kodu, vsechno to sem patri, jestli chces psat slusnej kod a precist to po sobe, musi to davat smysl, v tomhle kodu par nedostatku bylo, tak jsem na to poukazal, a to ze pise v cestine me vubec nestartuje, at pouziva jazyk jakej chce.

Ke zbytku nemam vytku, ano cetl jsem rychle a nepozorne, priznavam, za to jsem slozil omluvu. Ohledne tech komentaru, taky by je nepotrerboval, kdyby to mel v externim js :D ...

A ty bys ted mel vysvetlit jak to, ze ses schopnej mu sem dat odkaz na w3 school, kde hned prvni vec ukazuje

document.body.style.backgroundColor = "red";

a ty mu vesele poradis at to pouzije jako funkci. :D

PS: Vubec jsem to nemyslel zle, doufam, ze jsem se te nedotkl, nebo tak. Ja to tady beru jako takovou komunitu silenejch kluku od kodu, tak se ke vsem chovam trochu familiarne, ber to jako postouchnuti od kolegy ITaka, na zivo bys taky poznal, ze je to mysleno spis s legraci, podle meho tonu hlasu.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 29.12.2015 12:31
Avatar
lukes90
Člen
Avatar
lukes90:

Dík moc za rady. Já ten kód začal "prasit" po tom co jsem nemohl najít chybu a zkoušel jsem všechno možné.
A nějak mi nedošlo podívat se přes f12. Javascript sem nedělal asi 3 roky a nějak mi to vypadlo :-D. Ještě sem upravil to obarvování, aby to bylo z css(externího), doufám, že to není špatně :-).

 
Nahoru Odpovědět 29.12.2015 13:28
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na lukes90
Taskkill:

Pokud to funguje, tak je to v poradku, a jak presne to delas z externiho? Jako ze mas v css souboru udelanou tridu, ktera ma background color red a ty tem elementum pripradis tu tridu a pak pripadne zase odeberes? Tohle je taky moznost a je to jen na tobe, co si vyberes, teoreticky s podporu HTML5 formularu se to da jeste trochu vysperkovat, ale i to je jen neco navic, co zavisi na tom jak moc to potrebujes vysperkovany.

 
Nahoru Odpovědět 29.12.2015 13:34
Avatar
lukes90
Člen
Avatar
lukes90:

Jojo přesně. Jen se chci ještě zeptat jak dám popisek u textarea nahoru aby to vypadalo pěkně?

 
Nahoru Odpovědět 29.12.2015 13:42
Avatar
lukes90
Člen
Avatar
Odpovídá na lukes90
lukes90:

Mám to prázdným divem, ale nevím jestli je to úplně korektní :).

 
Nahoru Odpovědět 29.12.2015 13:46
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na lukes90
Taskkill:

Pouzijes css, http://jsfiddle.net/…l/aMLFE/303/ tohle je mnou upraveny fiddle co jsem nasel na SO na tohle odkazu http://stackoverflow.com/…of-text-area pulka slavy, rychlych aut a zen teda patri uzivateli s prezdivkou Arbel. :D

https://jsfiddle.net/…ll/zvqvph1o/

tady je primo jak to vypada na to tvoje

Editováno 29.12.2015 13:56
 
Nahoru Odpovědět 29.12.2015 13:55
Avatar
lukes90
Člen
Avatar
Odpovídá na Taskkill
lukes90:

Už sem to vyřešil, ale díky moc :-).

 
Nahoru Odpovědět 29.12.2015 15:43
Avatar
Alesseon
Člen
Avatar
Odpovídá na Taskkill
Alesseon:

a ty mu vesele poradis at to pouzije jako funkci

Běžně používám jQuery a taky sem si neuvědomil že to vlastně není metoda.. :/

Nahoru Odpovědět 29.12.2015 16:49
This is a bad day to be human...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Alesseon
Taskkill:

To me nenapadlo, jo jQuery je jasnym duvodem. (ale nemej ze me spatnou naladu, ja to fakt nemyslel zle) :)

 
Nahoru Odpovědět 29.12.2015 16:54
Avatar
lukes90
Člen
Avatar
lukes90:

Jen ještě dotaz. Nevíte ,kde by bylo dobře popsáno, jak udělat foto galerii?.

 
Nahoru Odpovědět 29.12.2015 19:11
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 20 zpráv z 20.