{"id":29253,"date":"2021-06-07T09:34:00","date_gmt":"2021-06-07T06:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29253"},"modified":"2021-10-17T04:24:16","modified_gmt":"2021-10-17T01:24:16","slug":"html-formvalidering-med-persilja","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/html-formvalidering-med-persilja\/","title":{"rendered":"HTML-formvalidering med persilja"},"content":{"rendered":"

Letar du efter att anv\u00e4nda valideringar p\u00e5 ditt HTML-formul\u00e4r? Validering av klientsidan \u00e4r till hj\u00e4lp f\u00f6r att s\u00e4kerst\u00e4lla att alla formul\u00e4rf\u00e4lt \u00e4r ifyllda och i korrekt format. Det hj\u00e4lper anv\u00e4ndare att fixa ogiltiga data omedelbart. Du b\u00f6r alltid ha valideringar p\u00e5 klientsidan p\u00e5 dina webbplatsformul\u00e4r. Om du hoppar \u00f6ver den och endast till\u00e4mpar validering p\u00e5 serversidan f\u00f6rdr\u00f6jer det inl\u00e4mningen av formul\u00e4ret vid eventuella fel.<\/p>\n

Persilja<\/a> \u00e4r ett anv\u00e4ndbart formul\u00e4rvalideringsbibliotek som \u00e4r l\u00e4tt att integrera. Detta bibliotek ger en b\u00e4ttre UX j\u00e4mf\u00f6rt med standard HTML5-valideringar. Du beh\u00f6ver bara skriva n\u00e5gra uttalanden s\u00e5 \u00e4r du klar. Persilja ger en rik upps\u00e4ttning alternativ med vilka du kan ut\u00f6ka dina anpassade valideringar. Jag t\u00e4nker inte t\u00e4cka varje alternativ. Syftet med denna handledning \u00e4r att g\u00f6ra dig bekant med persilja och visa dig hur du anv\u00e4nder grundl\u00e4ggande valideringar. Man kan utforska deras dokumentation och bekanta sig med alla funktioner som biblioteket erbjuder.<\/p>\n

F\u00f6r denna handledning ska jag skapa ett enkelt formul\u00e4r med f\u00e5 f\u00e4lt som namn, e-post, k\u00f6n etc. Alla formul\u00e4rf\u00e4lt \u00e4r obligatoriska och vi kommer att till\u00e4mpa valideringar med persilja p\u00e5 v\u00e5rt formul\u00e4r.<\/p>\n

F\u00f6r att validera formul\u00e4ret med persilja m\u00e5ste vi inkludera dess JS-fil. Jag kommer att g\u00f6ra det med hj\u00e4lp av CDN.<\/p>\n

Persilja rekommenderar att du anv\u00e4nder din egen styling f\u00f6r felmeddelanden. Men f\u00f6r test\u00e4ndam\u00e5l kan du anv\u00e4nda deras CSS-fil som finns tillg\u00e4nglig p\u00e5 den h\u00e4r l\u00e4nken<\/a>.<\/p>\n

Hur man anv\u00e4nder persilja<\/h3>\n

F\u00f6r demo\u00e4ndam\u00e5let ska jag skapa ett formul\u00e4r med Bootstrap. S\u00e5 jag kommer att inkludera Bootstrap med CDN tillsammans med persiljefiler. Jag inkluderar ocks\u00e5 jQuery eftersom persilja beror p\u00e5 det.<\/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
I ovanst\u00e5ende kod har jag inkluderat alla n\u00f6dv\u00e4ndiga JS- och CSS-filer med CDN. Slutligen anv\u00e4nde jag $('#signup_form').parsley();<\/code>d\u00e4r #signup_form \u00e4r form-id. Nu n\u00e4r du trycker direkt p\u00e5 knappen Skicka visas fel som visas p\u00e5 sk\u00e4rmdumpen nedan.<\/p>\n
\"HTML-formvalidering<\/a><\/p>\n
N\u00e4r alla fel har \u00e5tg\u00e4rdats till\u00e5ter persilja dig att skicka ett formul\u00e4r som du sedan tar f\u00f6r serverbearbetning.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r validering av HTML-formul\u00e4r med persilja. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h3>\n