FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Jiří Bervid
Člen
Avatar
Jiří Bervid:1.4.2022 18:26

Ahoj, prosím o radu. Mám vytvořený jednoduchý formulář pomocí HTML a CSS a chci kontrolovat pomocí Javascriptu vyplnění povinných položek po stisknutí tlačítka odeslat. Nevím jak navázat to tlačítko na ten Javascript.

<!DOCTYPE html>
<html lang="cz">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="funkce.js" src="funkce.js">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Běžecký klub Pajdal formulář</title>


</head>
<body>



<H1>Běžecký klub Pajdal</H1>

<form name="form"action="" method="post"class="form"enctype="text/plain"onsubmit="return validate()"> <!-- Vytvoření formuláře metoda post-->
<p>* povinná pole</p>

         <label>Jméno</label><br>
         <input id="jmeno" name="jmeno"class="form"type="text" maxlength="255" span Class="povinná">*<span><br> <!-- Zde se zadá jméno-->

              <label>Příjmení</label><br>
              <input id="prijmeni" name="prijmeni" type="text" maxlength="255" span Class="povinná">*<span><br> <!-- Zde se zadá příjmení-->

                 <label>Email</label><br>
                  <input id="email" name="email" type="mail" maxlength="255" span Class="povinná">*<span><br> <!-- Zde se zadá email-->
                  <br>

                 </td></tr>
                     <tr><td id="vek" valign="top"><label>Váš věk:</label><span Class="povinná">*<span><td>  <!-- Zde se zadá věk povinné-->
                     <td><select name="vek">
                     <option value="v10">10-14
                     <option value="v15">15-17
                     <option value="v18">18-20
                     <option value="v21">21-25
                     <option value="v26">26-35
                     <option value="v36">36-55
                     <option value="v60">60 a více
                     </select><br>
                     <br>

                      <td id="delka"></id> <label>Preferovaná délka tratě:</label></td> <br> <!--Délka tratě -->
                        <input type="checkbox" name="5" value="5"> 5 km  <br>
                        <input type="checkbox" name="10" value="10"> 10 km <br>
                        <input type="checkbox" name="15" value="15"> 15 km <br>
                        <input type="checkbox" name="půlmaraton" value="pm"> Půlmaraton<br>
                        <input type="checkbox" name="maraton" value="m"> Maraton<br>
                        <input type="checkbox" name="ultra maraton" value="um"> Ultra maraton<br>

                        <td id="povrch"><label>Povrch</label></td><br> <!-- Výběr povrchu -->
                           <input type="radio" name="ot1" value="a"> Cross <br>
                           <input type="radio" name="ot1" value="b"> Asfalt <br>
                           <input type="radio" name="ot1" value="c"> Nezáleží <br>
                           <br>
                              <Label>Poznámka<label><br>
                              <br>
                              <textarea cols="40" rows="5" name="dopis">
                              </textarea><br>

                               <input type="submit" name="submit" value="Odeslat"src=funkce.js><br> <!-- Tlačítko pro odeslání formuláře-->

                               <input type="reset" value="Storno"> <!-- Tlačítko pro stornování formuláře-->

</html>
A tady je Javascript
 function validate()

var jmeno=document.getElementById("jmeno")=value;
var prijmeni=document.getElementById("prijmeni")=value;
var email=document.getElementById("email")=value;
var vek=document.getElementById("vek")=value;
var submitOK="true";
var i=0;

if (jmeno.length==0)
        {
        document.getElementById("jmeno").style.borderColor="rgb(255,0,0)"
        i=i+1;
        }


        if (prijmeni.length==0)
        {
        document.getElementById("prijmeni").style.borderColor="rgb(255,0,0)"
        i=i+1;
        }

        if (email.length==0)
        {
        document.getElementById("email").style.borderColor="rgb(255,0,0)"
        i=i+1;
        }
        if (vek.length==0)
        {
        document.getElementById("vek").style.borderColor="rgb(255,0,0)"
        i=i+1;
        }
        if (i>0)
        {
        alert("Pro vložení záznamu musíte vyplnit všechny povinné položky");
        submitOK="false";
        }

Chci docílit: Snažím se o kontrolu vyplnění povinných položek po zmáčknutí tlačítka odeslat.

 
Odpovědět
1.4.2022 18:26
Avatar
Ondřej Šrytr
Člen
Avatar
Ondřej Šrytr:3.4.2022 17:43

Ahoj,

lepší je využít událost onsubmit ve formuláři, než pracovat přímo s tlačítkem Odeslat. Po vyvolání událostí zavoláš funkci preventDefault(), která znemožní odeslání formuláře a ty můžeš provést potřebné kontroly. Pak je ale nutné zase formulář programově odeslat, nevím, jak se to dělá v čistém JS, ale minimálně na to je funkce v jQuery.

 
Nahoru Odpovědět
3.4.2022 17:43
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:4.4.2022 7:48 
1.
// tady bych mu predaval primo formular
onsubmit="return validate()"
onsubmit="return validate(this)"

2.
Johle je nesmyslm script se souboru se pripojuje pres tag script. Vygoogluj si priklady na js, kdyz nevis a najdi mi jediny, kde se to pise tak, jak jsi to napsal?
<input type="submit" name="submit" value="Odeslat"src=funkce.js>
<input type="submit" name="submit" value="Odeslat">
<script src=funkce.js></script>

"lepší je využít událost onsubmit ve formuláři" - to rozhodne ne, lepsi je pouzit form onsubmit, jak to mas

 
Nahoru Odpovědět
4.4.2022 7:48
Avatar
Tomáš
Člen
Avatar
Tomáš:12.7.2022 16:06

Ten tvůj validační script není úplně dobrý. Zkus udělat v html něco jako:

<input id="jmeno" name="jmeno" type="text" maxlength="255" required>

To required ti zajistí, že to uživatel nenechal prázdné (nekontroluješ length==0). Dále v JS použij JavaScript Validation API , které ti pomůže ověřit různé chyby (tooLong, valueMissing, ...) nebo jednoduše ti vrátí true, pokud je input zcela správně vyplněný. Navíc se ti formulář neodešle, pokud v html nejsou správné hodnoty.

DŮLEŽITÉ:
Nezapomeň ověřit hodnoty i v backendu, někdo by mohl naschvál odeslat neplatná data pomocí vlastního programu nebo by někdo mohl omylem odeslat prázdná data kvůli starému prohlížeči.

PS: Máš nějaký překlep v kódu, zapomněl jsi udělat >< mezi input a span (jméno, příjmení, email).

 
Nahoru Odpovědět
12.7.2022 16:06
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 4 zpráv z 4.