Diskuze: Validace formuláře

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

Více info »

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

Aktivity

tbartolen

Člen

tbartolen:27.12.2017 17:10

ZDar!

Hraju si s validací formuláře pomocí JS. Začal jsem tvořit funkci, ale zasekl jsem se u validace emailu. Mám takovýhle kód, pokud vyplním email, měla by se mi vypsat hláška, že je email špatně vyplněný, ne?

 function validateForm() {
       var x = document.forms ["contactFormular"]
       ["Jmeno"].value;
       if (x=="") {
           alert("Jméno musí být vyplněno");
           return false;
           }
       var y = document.forms ["contactFormular"]
       ["Prijmeni"].value;
       if (y=="") {
           alert("Příjmení musí být vyplněno");
           return false;
           }
      var z = document.forms ["contactFormular"]
      ["Email"].value;
      if (z=="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/") {
          alert ("Špatně vyplněný email");
          return false;
      }

}

Ale nic

Odpovědět

27.12.2017 17:10

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:27.12.2017 17:18

Jen bych doplnil...

Je mi to hodně proti srsti dělat validaci v javascriptu, načež hned v zápětí řešit odeslání emailu přes PHP. Nevidím v tom smysl a nechápu výhodu javascriptu pro validaci, když to mužu celé udělat v PHP a neplácat pátý přes deváty. Možná by jste mi vysvětlili a vyvedli z omylu, proč je javascript pro to lepší?

Dělám to v javascriptu čistě proto, že to tak chce zadavatel.

Nahoru Odpovědět

27.12.2017 17:18

Navštiv www.fb.com/skkelticz

Člen

:27.12.2017 17:24

Napríklad preto, že keď to urobíš čisto v PHP, musí sa znovu kompletne generovať a načítať celá stránka napríklad len preto, aby si ho upozornil, že nevyplnil mail. A ešte aj musíš ukladať napríklad do session všetky ostatné údaje, aby pri tom novom načítaní neprišiel o to, čo už vyplnil správne.

Editováno 27.12.2017 17:26

Nahoru Odpovědět

27.12.2017 17:24

VitekST

Člen

VitekST:27.12.2017 17:26

Validace u klienta se provádí pro to, aby si nemusel zbytečně odesílat požadavek na server, když máš špatný vstup.

Ono to možná tak nevadí ve vývojovém prostředí jako v tom produkčním - představ si uživatele někde na chatě u lesa, kde je dostupná jen síť EDGE, která je pomalá a má šílenou odezvu. Nedivil bych se, kdyby měl uživatel čekat 2 minuty, než vůbec všechna data odešle a dostane odpověď a asi nebudu daleko od pravdy, kdybych si myslel, že i tebe by takto udělaná webová aplikace vytáčela.

Jinak - validaci formulářů u klienta nemusíš celou dělat v JavaScriptu (ani z mého pohledu by to takto nebylo ideální) - některé věci má standard HTML5 už v sobě: https://developer.mozilla.org/…m_validation

Editováno 27.12.2017 17:28

Nahoru Odpovědět

27.12.2017 17:26

Honza Bittner

Tvůrce

Honza Bittner:27.12.2017 17:50

Btw. validaci bys samozřejmě měl dělat i potom znovu na serveru (ve většině z případů). Validace na straně prohlížeče ti jen eliminuje zbytečné refreshování stránky jen proto, aby ti to řeklo informace, které může téměř kompletně odchytit web realtime.

HTML 5 má již dostačující prvky validace samo o sobě. Pokud chceš něco speciálního, což při obyčejných formulářích nebudeš potřebovat, můžeš si provést vlastní kontrolu v JS.

Nahoru Odpovědět

27.12.2017 17:50

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Člen

:27.12.2017 18:00

Tak tak, dobrá poznámka, ako Honza hovorí - validáciu máš po správnosti robiť (väčšinou) na oboch stranách. Na klientovi v princípe len kvôli lepšiemu User eXperience, na serveri kvôli security.

Nahoru Odpovědět

27.12.2017 18:00

tbartolen

Člen

tbartolen:27.12.2017 18:09

Ok, takže bych měl upravit funkci z ITNetwork nějakým nasledujícím způsobem

<?php
mb_internal_encoding("UTF-8");
if ($_POST) {
$head = 'From:' . $_POST['Email'];
$head .= "\nMIME-Version: 1.0\n";
$head .= "Content-Type: text/html; charset=\"utf-8\"\n";
$adress = '[email protected]';
$subject = 'Nová zpráva z Stan se Keltem';
$success = mb_send_mail($adress, $subject, $_POST['contactFormular'], $head);
}
        ?>

To je odeslání zprávy, potom samotné HTML

<div class="container mb-5 p-3 text-white">
       <h1>Kontaktní formulář</h1>
       <form name="contactFormular"
             onsubmit="return validateForm()"
             method="post">
           <!--Jméno a příjmení v jedné řadě-->

           <div class="form-row">

               <div class="form-group col-3">
                   <label for="Jmeno">Jméno:</label>
                   <input type="text" class="form-control" name="Jmeno" required>
               </div>

               <div class="form-group col">
                   <label for="Prijmeni">Příjmení:</label>
                   <input type="text" class="form-control" name="Prijmeni" required>
               </div>

           </div>
           <!--Jméno a příjmení v jedné řadě-->

           <div class="form-group">
               <label for="Datum">Datum Narození:</label>
               <input type="date" class="form-control" name="Datum" required>
           </div>


           <div class="form-group">
               <label for="Email">Email:</label>
               <input type="text" class="form-control" name="Email" required>
               <small class="form-text text-muted">Váš email nezneužijeme, ale musíme vědět, komu odepsat!</small>
                 </div>


           <div class="form-check">
               <label class="custom-control custom-radio">
                   <input class="custom-control-input" type="radio" name="pohlavi" name="Muz" value="Muž">
                   <span class="custom-control-indicator"></span>
                   <span class="custom-control-description">Muž</span>
               </label>
           </div>
           <div class="form-check">
               <label class="custom-control custom-radio">
                   <input class="custom-control-input" type="radio" name="pohlavi" mame="Zena" value="Žena">
                   <span class="custom-control-indicator"></span>
                   <span class="custom-control-description">Žena</span>
               </label>
           </div>

           <div class="form-group">
               <label for="deti">Počet dětí:</label>
               <!--<input type="number" class="form-control" id="deti"> -->
               <select class="custom-select"  name="formular-select" required>
                   <option>0</option>
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
                   <option>4</option>
                   <option>5</option>
                   <option>6</option>
                   <option>7</option>
                   <option>8</option>
               </select>
           </div>

           <button type="submit" class="btn btn-primary">Odeslat</button>


       </form></div>

a k tomu bych měl vytvořit validaci na server a client side pomocí JS, takže vytvořit funkci která bude cosi dělat, nevím co, to najdu asi někde tady
https://developer.mozilla.org/…m_validation

Mohlo by to tak být?

Editováno 27.12.2017 18:10

Nahoru Odpovědět

27.12.2017 18:09

Navštiv www.fb.com/skkelticz

Člen

:27.12.2017 18:17

No ... ani by som to takto nerobil. Používaš na poslanie mailu vstavanú funkciu mail, čo prakticky nikto nerobí. Použi phpmailer. A validáciu tam ani len nemáš. Keďže nepoužívaš žiadny framework, tak na validáciu si zasa pripni https://github.com/Wixel/GUMP knižnicu. Týmto spôsobom nemusíš nanovo vymýšľať koleso a validáciu plus odoslanie vyriešiš prehľadným spôsobom.

Nahoru Odpovědět

27.12.2017 18:17

tbartolen

Člen

tbartolen:27.12.2017 18:35

Oukej, ted jsem z toho už doopravdy jelen. Proč mám používat PHP validaci, když je to ta špatná, co bude klientovi refreshovat stránku ?

Je to Bootstrap, ale to asi nebude knihovně vadit

Nahoru Odpovědět

27.12.2017 18:35

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:27.12.2017 18:43

Oukej, takhle to nejde. Mám tady miliardu řešení a jsem z toho kompletně na palici. Takže

Je to Bootstrap
bootstrap mi dává nějaké možnosti validace, ale neřeší samotnou funkci, pouze stylování samotných zpráv
Měl bych být schopný provést client side validaci jen pomocí HTML...tím pádem by to měl být schopný provést ten bootstrap a já si jen ostyluju chybové hlášky, ne?
Na server side validaci budu potřebovat tedy nějakou funkci v JS / php

Je to tak?

Nahoru Odpovědět

27.12.2017 18:43

Navštiv www.fb.com/skkelticz

Petr

Člen

Petr:28.12.2017 10:54

K puvodnimu dotazu:

if (z=="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/")

Tohle je spatne, porovnavas hodnotu z pole formulare s hodnotou patternu.
Tady je priklad toho jak se to dela: https://stackoverflow.com/…n-javascript
Najdi si co jsou to regularni vyrazy (anglicky regexp nebo regular expression) a jak se pouzivaji v programovani.

Dalsi vec, nove prohlizece podporuji ruzne typy inputu ve formulari, vcetne emailu, takze to za tebe muze validovat browser:
https://www.w3schools.com/…ut_types.asp

Nicmene pro klid duse bych pouzil javascript i to html, kdyby nekoho napadlo ze tam poleze s IE9 a tak podobne.

Dalsi vec je ta validace na serveru. Validace na serveru se dela ze dvou duvodu:

bezpecnost (SQL injection apod.)
konzistence dat

Zrovna u toho emailu mi prijde ze staci udelat validaci na klientovi a na serveru to vubec neresit (samozrejme validovat hodonotu kvuli bezpecnosti musis vzdy, pokud tam mas databazi u ktere hrozi SQL injection).
Proc to neni nutne na serveru? Protoze te v podstate netrapi ze tam je spatny email - je to problem toho uzivatele, protoze pokud uzivatel obesel validaci na klientovi tak k tomu mel zrejme duvod, ktery nebyl uplne cestny.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

28.12.2017 10:54

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

Zjistit více...

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

Více info »

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 11 zpráv z 11.