Autor Zpráva
Dano_V
Profil *
Keď prezerám tieto stránky, vidím, že sa tu dá skutočne veľa naučiť. Len to zaberá veľmi veľa času.-)

K problému:
Vytvoril som jeden zložitý formulár, vytvoril som k tomu aj odoslanie *.php súborom, všetko funguje podľa mojich predstáv, problém nastal iba vtedy, keď som tie okienka (input-y) chcel skontrolovať javaskriptom. Použil som k tomu školský príklad:

        function kontrola() {

            if(kup.meno.value == ""){
             alert("Zabudli Ste vyplniť svoje meno!")
            kup.meno.focus()
            kup.meno.select()
            return false }


            if(kup.telefon.value == ""){
             alert("Zabudli Ste vyplniť číslo telefónu!")
            kup.telefon.focus()
            kup.telefon.select()
            return false }
            }

Keďže vo formulári mám asi dvadsať inputov, medi nimi aj checkboxy, a chcel by som, aby skript mi prešiel všetky okienka a v prípade potreby kurzor sa zastavil v okienku, kde je nedostatok. V tomto skripte mám ošetrený aj email - je to trošku zložitejší skript, ale na tomto istom princípe - a myslel som si, že keď rad za radom napíšem tieto "if"-i ku každému okienku, tak budem v poriadku.

Pravda je ale taká, že skript po prejdení troch až štyroch inputov, (asi sa unaví -); ) kontrolu ukončí a formulár je odoslaný nekontrolovaný. Už niekoľko dní listujem "múdre" knihy o javaskripte, (mám dve), a bádam aj na internete, ale som sa s takým problémom nestretol. Po prečítaní niektorých poznámok tu na týchto stranách som nadobudol presvedčenie, že by sa to asi dalo vyriešiť cyklom for, ale ako k tomu postaviť podmienky, to neviem.

Ako by som mohol donútiť javaskript, aby mi prešiel všetky "if"-i a v prípade potreby ukázal v ktorom okienku treba niečo napraviť?

Za pomoc ďakujem!
rafej
Profil
Proč nepoužíváš středníky?
Vyzkoušej toto:
function kontrola() {
 
            if(kup.meno.value == ""){
              alert("Zabudli Ste vyplniť svoje meno!");
              kup.meno.focus();
              kup.meno.select();
              return false; 
            }else if(kup.telefon.value == ""){
              alert("Zabudli Ste vyplniť číslo telefónu!");
              kup.telefon.focus();
              kup.telefon.select();
              return false; 
            }else{
              return true;
            }

Nejlépe bys ale udělal vložit sem problematický javascript a HTML kód formuláře. Ne všechny formulářové prvky lze kontrolovat pomocí value, např. select.
Dano_V
Profil *
rafej:

Stredníky nepoužívam preto, lebo ich nepoužíva ani Tom Negrino vo svojej knihe o javaskriptoch, ale napríklad David Morkes vo svojej knihe používa. Som zmätený, a neviem, či sa to má používať, alebo nie.

Akú vlastne úlohu stredníky zastávajú? Keď vyskúšam skripty Negriniho bez stredníkov, fungujú bezvadne, ale aj skripty Morkesove idú bezvadne. Teda stredníky nemajú žiadny význam!

Čo sa týka skriptu, vyskúšal som radu. Pokial to bolo spojené tak, ako je to tu nado mnou, išlo to, ale keď som pridal ďalšie "if"-i, tak to už nefungovalo. Ale za radu ďakujem, lebo ma to usmernilo trošku inak hladať príčinu. Po mnohých pokusoch som vyriešil záhadu dám sem problémovú časť formulára aj skriptu. Skript je samozrejme dlhší, ale na pochopenie problému to postačí.

<html><head>

<script language="javascript">
         re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

        function kontrola() {

            if(kup.meno.value == ""){
             alert("Zabudli Ste napísať svoje meno!");
            kup.meno.focus();
            kup.meno.select();
            return false; }
        
              if(kup.ulica.value == ""){
             alert("Zabudli Ste napísať názov Vašej ulice!");
            kup.ulica.focus();
            kup.ulica.select();
            return false;}

             if(kup.psc.value == ""){
             alert("Zabudli Ste napísať smerové číslo!");
            kup.psc.focus();
            kup.psc.select();
            return false;}

            if(kup.mesto.value == ""){
             alert("Zabudli Ste napísať názov Vášho mesta!");
            kup.mesto.focus();
            kup.mesto.select();
            return false;}

             if(kup.kusy.value == ""){
             alert("Zabudli Ste napísať počet kusov!");
            kup.kusy.focus();
            kup.kusy.select();
            return false;}

             if(kup.dlzka.value == ""){
             alert("Zabudli Ste napísať dlžku kusov!");
            kup.dlzka.focus();
            kup.dlzka.select();
            return false;}

             if(kup.priemer.value == ""){
             alert("Zabudli Ste napísať priemer kusov!");
            kup.priemer.focus();
            kup.priemer.select();
            return false;}

             if(kup.telefon.value == ""){
             alert("Zabudli Ste napísať číslo telefónu!");
            kup.telefon.focus();
            kup.telefon.select();
            return false;}

            if (re.test(kup.email.value)) {
            return true;
            }
            alert("Chybná mailová adresa!");
            kup.email.focus();
            kup.email.select();
            return false;

}

function kontrolaDat() {

      if (document.getElementsByName("obch")[0].checked == false) {
     alert("Musíte potvrdiť, že súhlasíte s obchodnými podmienkami!")
    kup.obch.focus()

      return false
  }   else 
    {
            if (!kontrola(kup.meno.value)) {
                return false
            }
        return true
    }

}

</script>
</head><body>

   <form onsubmit="return kontrolaDat(this)"  name="kup" action="objednavka/" enctype="multipart/form-data" method="post" >

<h5>Súhlasím s <a href="op_sk.doc"><font color="blue" size="3">obchodnými podmienkami</font></a> Ano? 
    <input  name="obch" type="checkbox" > </h5>

<table width="560" border=0 ><tr><td width="180">

     Počet kusov</td>
     <td> 
<input class="inp" name="kusy" type="text">
        </td>
    </tr>
          <tr>
<td>
      Dĺžka </td>
    <td>
<input class="inp" name="dlzka" type="text">
        </td>
    </tr>
        <tr>
<td>
    Priemer: </td><td>
<input class="inp" name="priemer" type="text">
        </td>
    </tr>
        <tr>
<td>
     Meno a priezvisko</td><td> 
<input class="inp" name="meno" type="text">
        </td>
    </tr>
         <tr>
<td>
    Váš email</td><td>    
<input class="inp" name="email" type="text">
        </td>
    </tr>
         <tr>
<td>
    Číslo telefónu:</td><td>   
<input class="inp" name="telefon" type="text">
        </td>
    </tr>
        <tr>
<td>
    Ulica</td><td>
<input class="inp" name="ulica" type="text">
        </td>
    </tr>
          <tr>
<td>
     PSČ</td><td>
<input class="inp" name="psc" type="int">
        </td>
    </tr>
         <tr>
<td>
    Mesto: </td><td> 
<input class="inp" name="mesto" type="text">
     </td>
           </tr>
</table>
<input   type="submit"  value=" Odoslať správu " >

            </form>
<br>
</body></html>

Problém bol v tom, že tá časť na kontrolu emailov obsahuje return true. Svoju úlohu to síce vykonalo správne, ale v prípade, keď okienko bolo správne vyplnené, vyhodilo true a ukončilo ďalšiu kontrlolu. A keďže som to mal na vyšších miestach, tak po kontrole emailu vždy dochádzalo k ukončeniu kontroly.

Problém som vyriešil tak, že som kontrolu emailu dal na posledné miesto reťazca.

Ale zaujímala by ma ešte jedna vec: Keď skúšam skript v takejto jednoduchej stránke, tak alert vypisuje texty správne. Keď to ale dám do zložitého html súboru, tak dostávam kockované písmená. Darmo nastavím charset na windows-1250, alebo aj inak, vôbec nato nereaguje. Čo mi to môže robiť? V akútnych prípadoch to rieším kódovaním kritických písmien, ale chcel by som zistiť, čo je tomu príčinou a či sa to náhodou nedá riešiť aj bez toho kódovania?

Za radu ďakujem.
_es
Profil
Dano_V:
Teda stredníky nemajú žiadny význam!
Tie „stredníky“, po slovensky bodkočiarky, majú význam taký, že jednoznačne oddeľujú príkazy. Lebo koniec riadka príkaz ukončiť môže, no nemusí. Stačí, aby za zalomením riadka bola zátvorka, nejaký operátor (+, -, ...) a pod. a vznikne chyba - niekedy ťažšie odhaliteľná. Okrem toho, niektoré nástroje na úpravu kódu rátajú s tým, že môžu „beztrestne“ konce riadkov odstrániť.

Keď to ale dám do zložitého html súboru, tak dostávam kockované písmená. Darmo nastavím charset na windows-1250, alebo aj inak, vôbec nato nereaguje. Čo mi to môže robiť?
To, že nie je JS kód v rovnakom kódovaní ako stránka. Stačí len použiť správne kódovanie.
rafej
Profil
K té funkci kontrola. Můžeš to napsat i takto:
function kontrola() {

if(kup.meno.value == ""){              
  alert("Zabudli Ste napísať svoje meno!");            
  kup.meno.focus();             
  kup.meno.select();             
  return false; }                       

...
if (!re.test(kup.email.value)) {             
  alert("Chybná mailová adresa!");             
  kup.email.focus();             
  kup.email.select();            
  return false;   
}

return true;
}

Místo tří teček si doplň ostatní podmínky. Na konci jsem ti přepsala tu kontrolu e-mailu. Takhle se ta podmínka zneguje - funguje opačně, takže kontroluješ selhání. Je lepší napsat všechny podmínky stejně a pokud není žádná splněna na konci funkce vrátit true.

Jedna drobnost ke kódu. Používáš tam select(). To ti vybere obsah políčka formuláře a při kliknutí se celý obsah může nechtěně přemazat. Myslíš, že je to pro opravu hodnoty šťastné řešení? Nebude lepší, když do políčka, které uživatel potřebuje opravit, dostane pouze kurzor = focus() a pak si ho už sám označí, jak bude potřebovat?

Problém s kódováním může být i při ukládání HTML nebo javascriptového kódu v programovacím editoru. Co používáš na psaní/úpravu kódu?
yFang
Profil
Dano_V:
Po prečítaní niektorých poznámok tu na týchto stranách som nadobudol presvedčenie, že by sa to asi dalo vyriešiť cyklom for, ale ako k tomu postaviť podmienky, to neviem.
Určitě to jde. Jednou z možností může být uložit si do data atributů inputů, jak se to má validovat a jaké zobrazovat chybové hlášky, a pak to celé projít, zvalidovat a zobrazit chyby.
Udělal jsem takovou jednoduchou ukázku, jak by se to dalo udělat (použil jsem jQuery, protože jsem líný :), ale snad z toho bude princip pochopitelný).
http://kod.djpw.cz/jufb
Dano_V
Profil *
_es:
Ďakujem za vysvetlenie bodkočiarok.

A ako zistím, aké kódovanie používa JavaScript, aby mi na stránke s kódom windows-1250 neboli kockované písmená?

rafej:
Dobrá úprava, prekopíroval som si to. Ďakujem. Že aký editor používam? Windovsácky Poznámkový blok. Z Totalkomanderu sa to dobre štartuje a zvykol som si na neho. Preto všetky stránky mám v charset=windows-1250, lebo to netreba prekódovať.

K problému select(): O tom som takto ešte nerozmýšlal, možno v prípade mailu by to aj bolo dobré tak riešiť, ale v ostatných prípadoch asi je to dobré tak, ako je. Lebo takto človek vidí, kde mu bliká kurzor

yFang:
Vyskúšal som ten kód tak, že som ho prekopíroval do čistej html stránky, ale mi to nefunguje. Nepotrebuje to náhodou nejakú funkciu na začiatku? A volať ju s onsubmit=return z formulára?

V jQuery vidím často tento znak '$'. Tak som vedel, že to je znak php. Akú úlohu to spĺňa v týchto skriptoch?
yFang
Profil
Dano_V:
Vyskúšal som ten kód tak, že som ho prekopíroval do čistej html stránky, ale mi to nefunguje. Nepotrebuje to náhodou nejakú funkciu na začiatku? A volať ju s onsubmit=return z formulára?
Ano, to bude tím, žes tam neměl jQuery knihovnu, žádnou funkci na začátku volat z formuláře to nepotřebuje. Každopádně, přepsal jsem to bez použití jQuery, snad to bude pochopitelnější:
http://kod.djpw.cz/rufb

V jQuery vidím často tento znak '$'. Tak som vedel, že to je znak php. Akú úlohu to spĺňa v týchto skriptoch?
$ je zkrakta pro funkci jQuery(), více si o tom můžeš přečíst třeba tady http://jqfundamentals.com/chapter/jquery-basics
Dano_V
Profil *
[#8] yFang

Vyskúšal som aj túto verziu tam na mieste pod tým linkom: funguje to v Chrome, v Opere, vo Firefoxe, ale to nefunguje v IE8, respektive, po nejakom trápení a opakovaní pokusu ho naštartovať veľmi neochotne sa mi rozbehol. Keď to prekopírujem do čistej html stránky, tak to nefunguje ani v jednom z týchto prehliadačov. Pravdepodobne to bude skript pre budúce desaťročie. -)

Keďže po anglicky neviem, tú doporučenú stránku som čítal pomocou prekladača. To podstatné som pochopil. Ďakujem
yFang
Profil
Dano_V:
Keď to prekopírujem do čistej html stránky, tak to nefunguje ani v jednom z týchto prehliadačov.
Myslím, že to kopíruješ špatně, jak vypadá celý kód té nové čisté stránky? Každopádně nešlo o to, aby sis to jen překopíroval, ale spíš o naznačení principu, jak by se to dalo udělat.
Dano_V
Profil *
yFang:

Každopádně nešlo o to, aby sis to jen překopíroval
No dobre, súhlasím, ale predsa by ten skript mal ukázať trošku svoju životaschopnosť. Takéto skriptíky totiž ukladám v počítači a v prípade potreby osádzam a upravujem podľa potreby. A keď to má ešte aj vysvetlenia, to je vynikajúce. Len by bolo dobré, keby to aj fungovalo.

Tento môj terajší problém som už vypracoval, dopnil som o všetky údaje, funguje mi to dobre. Až nato, že asi celý skript budem musieť umiestniť do hlavy, lebo z kontajnera my vypisuje kockaté písmená. Keď je to v hlave, všetko je oké.

Ten tvoj skript som teda skúšal aj takto:
<!doctype html><head></head><body>

<!--
u každého inputu, který chci validovat si nastavím pravidlo, které chci použít (data-validation) a chybovou hlášku, která se má zobrazit, pokud je špatně vyplněné pole 

(data-alert)
-->
<form action="" method="post">
    <p>
        <label for="jmeno">Jméno</label>
        <input type="text" name="first_name" data-validation="notempty" data-alert="Vyplňte jméno">
    </p>
    <p>
        <label for="jmeno">Příjmení</label>
        <input type="text" name="last_name" data-validation="notempty" data-alert="Vyplňte příjmení">
    </p>
    <p>
        <label for="jmeno">E-mail</label>
        <input type="text" name="email" data-validation="email" data-alert="Email je ve špatném formátu">
    </p>
    <input type="submit" value="Odeslat">
</form>
<script type="text/javascript" >

// Tady mám uložené funkce, pro validační pravidla, která používám. Každá funkce dostane hodnotu a vrací true nebo false podle toho, jestli je hodnota správně
var Validations = {
    notempty: function(value) {
        return value.length > 0;
    },
    email: function(value) {
        return value.match(/\S+@\S+\.\S+/);
    }
};

// funkce na validování formuláře
var validateForm = function(form) {
    // nastavím flag na true, formulář je v pořádku
    var formValid = true;
    
    // projdu všechny prvky ve formuláři
    var elements = form.elements;
    for(var i = 0; i < elements.length; i++) {
        
        // pravidlo uložené v data atributu validation
        var validation = elements[i].dataset.validation;
        
        // nejprve zkontroluji, jestli má input nastavené nějaké pravidlo a jestli existuje validační funkce pro pravidlo
        if (validation && Validations[validation]) {
            
            // zavolám validační funkci z objektu Validations a pokud není hodnota správně...
            if (!Validations[validation](elements[i].value)) {
                // ... zobrazím chybovou hlášku a přesunu kurzor do inputu
                alert(elements[i].dataset.alert)
                elements[i].focus();
                
                // nastavím flag na false a ukončím cyklus
                formValid = false;
                break;
            }
        }
    }
    
    // vrátím flag, který značí, jestli je formulář v pořádku nebo ne
    return formValid;
};


// spuštění validace formuláře po odeslání
document.querySelector('form').onsubmit = function() {
    return validateForm(this);
}
</script>
</body></html>


Ale aj takto:


<!doctype html><head>
<script type="text/javascript" >

// Tady mám uložené funkce, pro validační pravidla, která používám. Každá funkce dostane hodnotu a vrací true nebo false podle toho, jestli je hodnota správně
var Validations = {
    notempty: function(value) {
        return value.length > 0;
    },
    email: function(value) {
        return value.match(/\S+@\S+\.\S+/);
    }
};

// funkce na validování formuláře
var validateForm = function(form) {
    // nastavím flag na true, formulář je v pořádku
    var formValid = true;
    
    // projdu všechny prvky ve formuláři
    var elements = form.elements;
    for(var i = 0; i < elements.length; i++) {
        
        // pravidlo uložené v data atributu validation
        var validation = elements[i].dataset.validation;
        
        // nejprve zkontroluji, jestli má input nastavené nějaké pravidlo a jestli existuje validační funkce pro pravidlo
        if (validation && Validations[validation]) {
            
            // zavolám validační funkci z objektu Validations a pokud není hodnota správně...
            if (!Validations[validation](elements[i].value)) {
                // ... zobrazím chybovou hlášku a přesunu kurzor do inputu
                alert(elements[i].dataset.alert)
                elements[i].focus();
                
                // nastavím flag na false a ukončím cyklus
                formValid = false;
                break;
            }
        }
    }
    
    // vrátím flag, který značí, jestli je formulář v pořádku nebo ne
    return formValid;
};


// spuštění validace formuláře po odeslání
document.querySelector('form').onsubmit = function() {
    return validateForm(this);
}

</script>

</head><body>

<!--
u každého inputu, který chci validovat si nastavím pravidlo, které chci použít (data-validation) a chybovou hlášku, která se má zobrazit, pokud je špatně vyplněné pole 

(data-alert)
-->
<form action="" method="post">
    <p>
        <label for="jmeno">Jméno</label>
        <input type="text" name="first_name" data-validation="notempty" data-alert="Vyplňte jméno">
    </p>
    <p>
        <label for="jmeno">Příjmení</label>
        <input type="text" name="last_name" data-validation="notempty" data-alert="Vyplňte příjmení">
    </p>
    <p>
        <label for="jmeno">E-mail</label>
        <input type="text" name="email" data-validation="email" data-alert="Email je ve špatném formátu">
    </p>
    <input type="submit" value="Odeslat">
</form>

</body></html>
Chamurappi
Profil
Reaguji na yFanga:
Proč mu doporučuješ dataset? Má mizernou podporu v prohlížečích.


Reaguji na Dana_V:
Místo všech dataset.něco použit getAttribute("data-něco"), jinak ti to nepoběží v Explorerech starších než verze 11.
Dano_V
Profil *
Reagujem
Chamurappi:

Prepísal som to, ale výsledok je rovnaký. Škoda sa s tým zaoberať. Možno o pár rokov, keď už nebudú staršie prehliadače.-)

Ďakujem všetkým
yFang
Profil
Dano_V:
Není to prohlížečem, ale tím, že máš ten javascript na začátku dokumentu, takže se tady:
// spuštění validace formuláře po odeslání
document.querySelector('form').onsubmit = function() {
    return validateForm(this);
}
nastavuje událost na elementu, který ještě neexistuje. Buď přesuň javascript na konec dokumentu (před </body>) nebo nastavuj tu událost až po načtení stránky.

Chamurappi:
Proč mu doporučuješ dataset? Má mizernou podporu v prohlížečích.
Ok, nenapadlo mě to, díky za upozornění.
Chamurappi
Profil
Reaguji na yFanga:
Buď přesuň javascript na konec dokumentu (před </body>) nebo nastavuj tu událost až po načtení stránky.
Nebo ji může napsat přímo do atributu, jako to měl úplně na začátku.
Dano_V
Profil *
yFang:
Skúsil som to tak, už to funguje, a dokonca aj v IE8. Ale tá verzia s tým datasetom skutočne nefunguje!
Dano_V
Profil *
Stala sa mi vec, ktorú si nemôžem nechať iba pre seba.
V bode
[#3] Dano_V
som sa pýtal na nasledovné:

Keď to ale dám do zložitého html súboru, tak dostávam kockované písmená. Darmo nastavím charset na windows-1250

Vtedy som ten problém vyriešil tak, že ten javaskript som umiestnil do hlavného súboru. Problém sa ale prihlásil znovu, keď som chcel odoslať obsah inputov do schránky. Posielalo mi kockované písmená. Postupne som vyprázdňoval najprv odosielací php skrip, keď som, si myslel, že to bude asi robiť on, a keď to nepomohlo v odhalení chyby, tak som vyprázdňoval môj html súbor. Po dlhých pokusoch som zistil, že samotný súbor je chybný. Keď som kompletný obsah chybného súboru premiestnil do iného súboru, tak mi všetko ide dobre. Dokonca aj javaskript som mohol znova premiestniť do kontajnera, a funguje bezvadne.

Moja otázka: Stáva sa často, alebo či sa to už niekomu stalo, že windowsácky Poznámkový blok vyprodukuje chybný súbor? Lebo sa to mne ešte nestalo, až teraz. Súbor pochádzal z bloku, ale som obsah doplňoval aj v Home Site, čo je program pre profesionálov. (Aspoň si to myslým)
_es
Profil
Dano_V:
Použité kódovanie je treba prehliadaču aj nejako oznámiť, najčastejšie takto: Meta tagy » Čeština, nastavení kódování. Inou možnosťou je HTTP hlavička, predpokladám že si ju asi nepoužil. Inak si môže prehliadač kódovanie chybne „domyslieť“.
Dano_V
Profil *
reagujem na
_es:

Tolko ja viem už dávno, ale to nato vôbec nereagovalo. Iba toľko, že keď som tam napísal utf-8, tak aj na stránke boli zle napísané písmená. Toto čo vravíš funguje iba vtedy, keď samotný súbor je v poriadku. Ale v tomto prípade nebol. Kto by mi neveril, dal som to na server na pokusy sem. Som zvedavý, či sa to niekomu podarí! Ja som musel použiť iný súbor.
_es
Profil
Dano_V [#19]:
Neviem, čo má byť ten „chybný“ súbor. Notepad ti to uložil asi v inom kódovaní, než si deklaroval na stránke, napríklad si použil znaky mimo znakovej sady windows-1250 a ponúkol ti uloženie v inom kódovaní. Pre kódovanie UTF-8 vkladá Notepad aj BOM a to môže niekedy robiť problémy. Použi radšej nejaký iný textový editor. Mám podozrenie, že celkom nerozumieš tomu, čo je znaková sada a čo kódovanie znakovej sady, lebo len uvádzaš, čo si kde „napísal“ a dúfaš, že si sa nejako správne trafil.
Dano_V
Profil *
_es:
Mám podozrenie, že celkom nerozumieš tomu, čo je znaková sada a čo kódovanie znakovej sady,
Aj kódovanie, aj znaková sada mi je známa, viem o čo tam ide, ale je pravdou, že som o BOM nevedel nič. Preto som sa rýchle opýtal strýka Google, a natrafil na celkom dobré vysvetlenie. Našiel som tam aj PHP kód na kontrolu a odstránenie BOM-u zo súborov nachádzajúcich sa vo web site. Údajne prekontroluje všetky súbory, vyčistí ich a napíše oznam, z ktorého súboru to bolo treba odstrániť.

Tak predsa len to bolo užitočné, že som to tu napísal, a znovu som sa niečo naučil. Videl som na internete, že s týmto problémom zápasili aj iný. Ale od teraz aspoň mi taký súbor nebude záhadou, ako to bolo do teraz.

Ďakujem za pomoc

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: