Diskuze: Validace formuláře

lukes90

Člen

lukes90:28.12.2015 21:20

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

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 (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

lukes90

Člen

lukes90:28.12.2015 21:54

<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> upravil jsem ho, ale nevím jak mám obarvit prázdná pole.

Nahoru Odpovědět

28.12.2015 21:54

Jan Lupčík

Tvůrce

Jan Lupčík:28.12.2015 22:17

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

Nahoru Odpovědět

28.12.2015 22:17

TruckersMP vývojář

lukes90

Člen

lukes90:28.12.2015 22:30

<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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:28.12.2015 23:07

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

Neaktivní uživatelský účet

lukes90

Člen

lukes90:28.12.2015 23:31

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

Alesseon

Člen

Alesseon:29.12.2015 1:36

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...

Alesseon

Člen

Alesseon:29.12.2015 1:49

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...

lukes90

Člen

lukes90:29.12.2015 11:13

   <!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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:29.12.2015 12:19

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 ( 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

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:29.12.2015 12:31

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...

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.
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 ...

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.

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í
+2,50 Kč

Nahoru Odpovědět

29.12.2015 12:31

Neaktivní uživatelský účet

lukes90

Člen

lukes90:29.12.2015 13:28

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:29.12.2015 13:34

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

Neaktivní uživatelský účet

lukes90

Člen

lukes90:29.12.2015 13:42

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

lukes90

Člen

lukes90:29.12.2015 13:46

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

Nahoru Odpovědět

29.12.2015 13:46

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:29.12.2015 13:55

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.

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

Neaktivní uživatelský účet

lukes90

Člen

lukes90:29.12.2015 15:43

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

Nahoru Odpovědět

29.12.2015 15:43

Alesseon

Člen

Alesseon:29.12.2015 16:49

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...

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:29.12.2015 16:54

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

Neaktivní uživatelský účet

lukes90

Člen

lukes90:29.12.2015 19:11

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

Nejčastěji vyhledáváné

Diskuze: Validace formuláře