{"id":26009,"date":"2021-06-07T09:43:00","date_gmt":"2021-06-07T06:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26009"},"modified":"2021-10-17T18:26:40","modified_gmt":"2021-10-17T15:26:40","slug":"html-vormi-valideerimine-peterselli-abil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/html-vormi-valideerimine-peterselli-abil\/","title":{"rendered":"HTML-vormi valideerimine peterselli abil"},"content":{"rendered":"

Kas otsite kinnitusi oma HTML-vormile? Kliendipoolsed valideerimised aitavad tagada, et k\u00f5ik vormiv\u00e4ljad oleksid t\u00e4idetud ja \u00f5iges vormingus. See aitab kasutajatel eba\u00f5iged andmed kohe parandada. Veebisaidi vormidel peaks alati olema kliendipoolne valideerimine. Kui j\u00e4tate selle vahele ja rakendate ainult serveripoolset valideerimist, viibib see vigade korral vormi esitamisega.<\/p>\n

Petersell<\/a> on kasulik vormide valideerimise teek, mida on lihtne integreerida. See teek pakub paremat kasutajaliidest, v\u00f5rreldes HTML5 vaikevalideerimisega. Peate kirjutama vaid paar avaldust ja olete valmis. Petersell pakub rikkalikke valikuid, mille abil saate oma kohandatud valideid laiendada. Ma ei hakka iga varianti kajastama. Selle \u00f5petuse eesm\u00e4rk on tutvuda peterselliga ja n\u00e4idata, kuidas rakendada p\u00f5hilisi valideerimisi. V\u00f5ib uurida nende dokumentatsiooni ja tutvuda k\u00f5igi raamatukogu pakutavate funktsioonidega.<\/p>\n

Selle \u00f5petuse jaoks kavatsen luua lihtsa vormi, kus on v\u00e4he v\u00e4lju nagu nimi, e-posti aadress, sugu jne. K\u00f5ik vormiv\u00e4ljad on kohustuslikud ja rakendame valideid peterselli abil oma vormil.<\/p>\n

Vormi kinnitamiseks peterselli abil peame lisama selle JS-faili. Teen seda CDN-i kasutades.<\/p>\n

Petersell soovitab veateadete jaoks kasutada oma stiili. Kuid testimise eesm\u00e4rgil saate kasutada nende linkide<\/a> CSS-faili .<\/p>\n

Kuidas kasutada peterselli<\/h3>\n

Demo eesm\u00e4rgil kavatsen luua vormi, kasutades Bootstrapi. Nii et lisan CDN-i kasutava Bootstrapi koos petersellifailidega. Lisan ka jQuery, kuna petersell s\u00f5ltub sellest.<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/css\/bootstrap.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/parsleyjs.org\/src\/parsley.css\" \/>\n<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<form class=\"form-horizontal\" id=\"signup_form\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputFirstName\" class=\"col-sm-2 control-label\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputFirstName\" name=\"first_name\" placeholder=\"First Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputLastName\" class=\"col-sm-2 control-label\">Last Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputLastName\" name=\"last_name\" placeholder=\"Last Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputEmail3\" class=\"col-sm-2 control-label\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control\" id=\"inputEmail3\" name=\"email\" placeholder=\"Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Gender<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"gender\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"male\" required> Male\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"female\" required> Female\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Skills<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"skills\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"php\" required> PHP\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"mysql\" required> MySQL\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-offset-2 col-sm-10\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Sign in<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n<\/div>\n\u00a0\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/js\/bootstrap.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/parsley.js\/2.9.2\/parsley.min.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0jQuery('#signup_form').parsley();\n<\/script><\/code><\/pre>\n
\u00dclaltoodud koodi juurde lisasin k\u00f5ik vajalikud JS- ja CSS-failid, kasutades CDN-i. L\u00f5puks kasutasin, $('#signup_form').parsley();<\/code>kus #signup_form on vormi ID. Kui kl\u00f5psate nuppu Esita otse, kuvatakse selles vead, nagu on n\u00e4idatud allpool oleval ekraanipildil.<\/p>\n
\"HTML-vormi<\/a><\/p>\n
Kui k\u00f5ik vead on parandatud, v\u00f5imaldab Petersell esitada vormi, mille v\u00f5tate serveripoolseks t\u00f6\u00f6tlemiseks.<\/p>\n
Loodetavasti saate HTML-vormi valideerimisest peterselli abil aru. Palun jagage oma m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h3>\n