Diskuze: Propojení html formuláře s externím javascriptem

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Jiří Bervid

Člen

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

Ondřej Šrytr

Člen

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

Peter Mlich

Člen

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

Tomáš

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.