Hei, onko HTML5 Validointi riittävä? Tarkoitan että onko mahdollista että tulevaisuudessa riittäisi pelkkä HTML5 Validointi (client) ja sitten PHP tarkistus (server)...?
Nyt käytän esimerkiksi Käyttäjäehtojen hyväksymisessä 'required' -atribuuttia, joka toimii uusilla selaimilla hyvin. Näistä selaimista ainoastaan (iOS Safari) ei tue validointia: (IE, Firefox, Chrome, Safari, Opera, iOS Safari). Eli onko mahdollista päästä eroon JavaScript tarkistuksista?
Html5 validoinnista tulee ensimmäisenä mieleen html5-sivuston validointi, ei niinkään jotain html-elementtien attributtien arvot.
Itse tarkistaisin html5:n oletusattribuuttien lisäksi ihan javascriptilläkin, jottei turhaan läheteltäisi palvelimelle "virheellistä" dataa.
Palvelimella tietenkin sitten tarkemmat tarkistukset, ennen datan "tallentamista".
Ei kai siitä kannata erikseen vaivautua, jos et js:llä halua tarkistusta tehdä. Serverivalidoinnit pitää tehdä joka tapauksessa, (muutenhan voisi vain postata itse string queryllä halutut arvot oli ne valideja arvoja tai ei, ja serveri hyväksyisi ne validina) ja serveripuolella hanskata homman siten että virheilmoitusta pamahtaa jos arvo n oli virheellinen.
HTML5-validointi on hyvä ja varmaan tulevaisuudessa yleistyy. Kaikkia erilaisia tarkistuksia ei kuitenkaan ole mahdollista esittää HTML5:n keinoin, joten JavaScriptilla on jatkossakin paikkansa. Palvelinpuolen validointi (esim. PHP:llä) on joka tapauksessa aina tarpeen.
Minusta sinun pitäisi ennen näitä kysymyksiäsi miettiä asiaa jotenkin järkevästi. Esimerkiksi onko nyt mielessäsi jokin syy, miksi HTML5-validointi ei voisi tulevaisuudessa olla riittävä? Minulle ei ainakaan tule mieleen mitään sellaista syytä. Päinvastoin monien HTML5:n ominaisuuksien leviäminen antaa viitteitä, että myös validoinnilla on toivoa.
Lebe80 kirjoitti:
Itse tarkistaisin html5:n oletusattribuuttien lisäksi ihan javascriptilläkin, jottei turhaan läheteltäisi palvelimelle "virheellistä" dataa.
Jokohan jostain löytyy JS-kirjasto, joka emuloi HTML5-validointia? Säästyisi vaivaa, kun ei tarvitsisi itse purkkailla JS:ää vanhoille selaimille.
Okei, kiitos hyvistä vinkeistä jälleen..
Kirjoitin epäselvästi, eli tarkoitin (HTML5) lomakkeen validointia. Nämä uudet tekstikenttä tyypit ovat uskomattoman hienoja. Niitä olen nyt käynyt läpi kunnolla. Eli teen jatkossa näin:
CLIENT (asiakas) | HTML5-validointi
SERVER (palvelin) | PHP-tarkistus
- Haluan ehdottomasti jättää JavaScriptin pois tästä touhusta. Toivotaan että tulevaisuudessa HTML5 olis arkipäivää niin yksinkertaisen tyylikästä ja helppoa sillä validoida lomaketietoa. Esimerkkinä tuo salasana kenttä esimerkiksi kun voi määritellä esim. 1-pieni kirjain, 1-suuri kirjain, min. 6 merkkiä jne.
Eikö js-validointi voisi silti edelleen olla mukana, ja tekee sillä vain kevyet validoinnit (esim. tarkistaa vain, että pakollisissa kentissä on edes jotain kirjoitettuna/valittuna). Tuollaisen saa hienosti toteutettua vaan tarkistelemalla jqueryllä vaikka "required" classilla olevien elementtien arvoja.
Lebe80 kirjoitti:
Eikö js-validointi voisi silti edelleen olla mukana, ja tekee sillä vain kevyet validoinnit (esim. tarkistaa vain, että pakollisissa kentissä on edes jotain kirjoitettuna/valittuna).
Pointti oli hyödyntää HTML5-uusia elementtejä. Jos selain ei tue näitä niin sitten PHP-tarkistus. Toisaalta ongelmia tulee heti kun otan käteeni iPadin tai Samsung Mini puhelimeni... no kiitos. Täytyy tutkia tuo että tsekkaisi vain tuon 'required' kentän jQuerylla!!
Lisäys:
Löysin tällaisen linkin: http://jqueryvalidation.org/required-method/
Pitääkö asentaa jokin plugin tähän touhuun?
Metabolix kirjoitti:
HTML5-validointi on hyvä ja varmaan tulevaisuudessa yleistyy. Kaikkia erilaisia tarkistuksia ei kuitenkaan ole mahdollista esittää HTML5:n keinoin, joten JavaScriptilla on jatkossakin paikkansa.
Niin, datan muotoa voi HTML5:n välineillä testata vain käyttäen tiettyjä erikoistarkistuksia (kuten päivämäärän muodon tarkistus) ja säännöllisillä lausekkeilla, joiden ilmaisuvoima on rajallinen (ja jotka johtavat joskus kömpelöihin rakenteisiin silloin, kun niiden käyttö on periaatteessa mahdollista).
Lebe80 kirjoitti:
Itse tarkistaisin html5:n oletusattribuuttien lisäksi ihan javascriptilläkin, jottei turhaan läheteltäisi palvelimelle "virheellistä" dataa.
Riippuu tavoitteista. Miten tärkeää on, että käyttäjä saa välittömän palautteen virheistä vanhoillakin selaimilla? Onko se sen arvoista, että samat tarkistukset koodataan kolmeen kertaan?
lainaus:
Jokohan jostain löytyy JS-kirjasto, joka emuloi HTML5-validointia? Säästyisi vaivaa, kun ei tarvitsisi itse purkkailla JS:ää vanhoille selaimille.
Onhan noita, hyvän valinta voi olla vaikeaa, parhaan valinta vielä vaikeampaa:
https://github.com/Modernizr/Modernizr/wiki/
Lisäys:
late kirjoitti:
Nämä uudet tekstikenttä tyypit ovat uskomattoman hienoja.
Uusia tekstikenttätyyppejä ei ole, ellei tyyppiä type=search lasketa sellaiseksi (ja sen vaikutus on hyvin rajoittunut). Sen sijaan on input-kontrollin tyyppejä, jotka korvaavat tekstikenttiä. Niiden hienous on suurelta osin illuusio. Erityisesti lokalisointi on ajateltu täysin väärin, eli on lähdetty ilman muuta siitä, että englanninkielisellä sivulla on ihan OK lukea päivämäärä suomenkielisellä käyttöliittymällä, jos käyttäjän järjestelmä tai selain on suomenkielinen.
lainaus:
Haluan ehdottomasti jättää JavaScriptin pois tästä touhusta.
Maailma on menossa siihen, että JavaScriptin osuus lisääntyy, ja HTML5 on suurelta osin itse asiassa JavaScriptiä (sovellusliittymiä, joita käytännössä käytetään lähes yksinomaan JavaScriptin yhteydessä). Tyhmä JavaScriptin käyttö toivottavasti vähenee.
lainaus:
Toivotaan että tulevaisuudessa HTML5 olis arkipäivää niin yksinkertaisen tyylikästä ja helppoa sillä validoida lomaketietoa. Esimerkkinä tuo salasana kenttä esimerkiksi kun voi määritellä esim. 1-pieni kirjain, 1-suuri kirjain, min. 6 merkkiä jne.
Vaikka tuollainen onkin ollut keskeisiä tavoitteita – HTML5 sai oikeastaan alkunsa juuri lomaketoimintojen laajentamishankkeesta – ja vaikka aika paljon on tehtykin (myös toteutettu), tarkistukset ovat sittenkin aika rajoittuneita. Esimerkiksi kuvaamaasi vaatimusta ei voi kovinkaan yksinkertaisella tavalla koodata säännölliseksi lausekkeeksi, kuten pitäisi, jos tarkistus halutaan tehdä HTML:llä. Sen sijaan JavaScript-silmukassa, joka käy läpi syötteen merkki merkiltä, tuollainen tarkistus on kakunpala.
Ja sitten jos ruvetaan puhumaan laadukkaan palvelun tekemistä tarkistuksista ei-triviaaleissa käytännön tilanteissa, ruvetaan puhumaan jo aika lailla muista asioista kuin HTML5:n mukaisista määritteistä. Esimerkiksi sen tarkistaminen, onko käyttäjän kirjoittama kadunnimi oikea (saati ennustavan syötön toteuttaminen) kannattaa todennäköisesti tehdä Ajax-kontrollilla, koska Suomen kaikkien kadunnimien liittäminen sivun koodiin ei yleensä ole järkevää.
Hmm.. mielenkiintoista. Tässähän ihan mieli laajenee.. juu mietin juuri tuota että ei kai minun nyt pidä tehdä 3-eri tekniikalla yhden rekisteröintilomakkeen tarkistusta. Eli..
(HTML5) sisältää monia hyviä juttuja vaikkapa nyt 'maxlenght' ja 'required'. Noh.. tosiaan iPadin kanssa required ei sitten toimikkaan, eli haittaako jos iPadin käyttäjä ohjautuukin uudelle PHP sivulle ja joutuu sitten mennä yhden kerran taaksepäin. Toki kokemus on huonompi kuin esim. Safari desktop selaimella, mutta toisaalta sekin on "huonompi käyttökokemus" kuin Chrome desktop selaimella.
Tavallaanhan noudatan progressiivisen kehityksen periaatetta, eli tavallaan se käyttäjä joka käyttää edistyneintä selainta, edistyneimmällä laitteella - hyötyy eniten.
iPad käyttäjä pystyy myös täyttämään lomakkeen vaikkakin häntä saatta ärsyttää enemmän. Okein, mutta tutkin toki tuon jQuery -> ja tsekkaus required. Modernizr tuli tutuksi Sovelton ja Tieturin kursseilla... ainakin kokeneet kouluttajat hehkuttivat sitä. Eli ainakin tällä hetkellä hyvä ratkaisu.
Lisäys: ...okei, eli paras tapa tarkistaa lomake voisi olla esimerkiksi tämä jQuery ratkaisu: http://jqueryvalidation.org/documentation/
Eihän sun periaatteessa tarvitse itse tehdä lomakkeen validointiin juuri mitään.
Optimaalisessa tilanteessa homma menisi näin: naputtelet tietotyypin määrittelyn php-koodiin. Kyseisten määrittelyiden pohjalta järjestelmä osaa luoda lomakkeen inputteineen ja palvelinpään validointisääntöineen. Lomakkeen renderöijä osaa vastaavasti samojen speksien pohjalta lisätä inputeille sopivat attribuutit. Polyfill-kirjastosi lukee sitten ne attribuutit ja paikkaa js:llä validointia selaimen päässä.
..ymmärsin melkein puolet.
Luultavasti on useita eri tapoja tehdä, Yucca mainitsi mm. Ajaxin ja Lebe80 puhui jQuerysta.. nyt pakko hieman nukkua. Taidan olla vähän liikaa koneella, kiitän.
Oikein toteutettu palvelinpuolen validointi tekee asiakaspuolen validoinnista tarpeettoman, silloin voi myös selaintukiasiat unohtaa.
<?php //form input $this->add(array( 'type' => 'Email', 'name' => 'email', 'options' => array( 'label' => 'Email address', ), )); //filter $inputFilter->add($factory->createInput(array( 'name' => 'email', 'required' => true, 'validators' => array( array('name' => 'EmailAddress'), array('name' => 'StringLength', 'options' => array( 'encoding' => 'UTF-8', 'max' => 256, ), ), array('name' => 'Db\NoRecordExists', 'options' => array( 'table' => 'users', 'field' => 'email', 'adapter' => $this->getDbAdapter(), ), ), ), ))); //view print $this->formRow($form->get('email')); //controller $userService = $this->getUserService(); $form = $userService->getEmailForm(); $request = $this->getRequest(); if ($request->isPost() AND $userService->save($request->getPost())) { //blablablaa } //service public function save(array $data) { $form = $this->getEmailForm(); $form->setData($data); if(!$form->isValid()) return false; return $this->getUserTable()->insert($form->getData()); }
qeijo kirjoitti:
Oikein toteutettu palvelinpuolen validointi tekee asiakaspuolen validoinnista tarpeettoman
Tuo vaikuttaa niin perustavanlaatuiselta väärinkäsitykseltä, että se haiskahtaa jo trollaukselta.
Oliko tarkoitus jatkaa virkettä sivulauseella ”jos käytettävyydelle ei anneta minkäänlaista merkitystä ja käyttäjät halutaan suututtaa tai turhauttaa”?
Yucca kirjoitti:
Oliko tarkoitus jatkaa virkettä sivulauseella ”jos käytettävyydelle ei anneta minkäänlaista merkitystä ja käyttäjät halutaan suututtaa tai turhauttaa”?
Huomaa ettet oikeasti tiedä käytännön tasolla mistä puhut, vaan kaikki on teoreettista sanahelinää.
Esimerkiksi hyvin toteutettu käyttäjän rekisteröintilomake ei käytettävyydeltään oleellisesti heikkene, vaikka tietojen validointi tehtäisiin ainoastaan palvelinpuolella.
Tarkoitan juuri normaalien syötekenttien validointia. En tietenkään vastusta sitä että luodaan interaktiivisia elämää helpottavia komponentteja lomakkeisiin.
Kun aikoinaan tein ensimmäisen funktioni, niin muistan kuinka kokeneemmat sanoivat minulle että funktion ei pidä olla:
- liian pitkä
- sen ei tarvitse tehdä haluttua asiaa maailman moderneimmalla tavalla
Funktio voisi olla:
- lyhyt
- tekee 1-2 asiaa (hae käyttäjien nimet kannasta palauta tai tulosta tieto)
- hyvin kommentoitu
Jos teen esimerkiksi erilaisia lomakkeita, ei ole järkevää tehdä kaikesta niin uskomattoman dynaamista. Seuraavan "koodaajan" pitää osata käyttää omia funktioitani. Okei antaa olla... Toinen juttu on se että meidän kaikkien tulisi antaa HTML5 uusille ominaisuuksille enemmän huomiota. On päivän selvää että 'required' atribuutti ei riitä ainoaksi tarkistukseksi, mutta on se nyt pirun hieno ominaisuus silloin kun se toimii hyvin.
(geijo, hyvin tiedät että käyttäjäkokemus on yksi puhutuimmista/ suurimmista jutuista tämän päivän ohjelmoinnissa/ web-kehityksessä).
(late, tiedostan käyttäjäkokemuksen merkityksen. Hyvä käyttäjäkokemus voidaan saavuttaa monella tavalla, riippumatta siitä missä kohtaa lomakkeen tiedot validoidaan)
Hei, osaako joku selittää miksi HTML:ssä on atribuutti 'maxlenght' mutta ei arvoa 'minlenght' ? Eikö olisi järkevä että voisi laittaa esim. minimi 1-kirjain, maksimi 25-kirjainta.
Nyt kun HTML5 on käytössä niin onko tuollainen 'minlenght' ominaisuus mahdoton lisätä (koodata) kieleen mukaan? Luultavasti homma ei toimi näin, mutta on hassua että HTML5:ssä on niin paljon uusia hienoja ominaisuuksia koskien lomakkeita, mutta sitten minimi pituus.. hmm.. no toisaalta 'required' kaiketi tarkistaa että kentässä on jokin merkki ja kaiketi 'pattern' voisi tarkistaa että vaikkapa vähintään 2-3 merkkiä.
Hmm.. toisaalta onkohan niin että juurikin esim. AJAXsilla voi sitten tehdä kaiken mahdollisen. Nyt nimittäin teen suuren osan tarkistuksista sen avulla, kiitän!
Aihe on jo aika vanha, joten et voi enää vastata siihen.