{"id":13159,"date":"2024-06-18T05:10:07","date_gmt":"2024-06-18T05:10:07","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=13159"},"modified":"2024-06-18T05:18:03","modified_gmt":"2024-06-18T05:18:03","slug":"validasi-form-dengan-javascript","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/","title":{"rendered":"Validasi Form dengan JavaScript"},"content":{"rendered":"\n<p>Kamu pasti pernah mengisi formulir online, kan? Nah, validasi form adalah salah satu hal penting yang memastikan data yang kamu masukkan benar dan sesuai. Yuk, kita bahas bagaimana cara melakukannya dengan JavaScript !<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Kenapa Perlu Validasi Form?<\/h4>\n\n\n\n<p>Validasi form penting karena:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Mencegah kesalahan<\/strong>: Menghindari data yang salah atau tidak lengkap.<\/li><li><strong>Menghemat waktu<\/strong>: Mencegah pengisian ulang form.<\/li><li><strong>Keamanan<\/strong>: Melindungi dari data yang berbahaya.<\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Persiapan Awal<\/h4>\n\n\n\n<p>Sebelum mulai, pastikan kamu sudah punya form sederhana di HTML. Contohnya:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;form id=&quot;myForm&quot;&gt;\n  &lt;label for=&quot;name&quot;&gt;Nama:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;\n  &lt;br&gt;\n  &lt;label for=&quot;email&quot;&gt;Email:&lt;\/label&gt;\n  &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;\n  &lt;br&gt;\n  &lt;input type=&quot;submit&quot; value=&quot;Kirim&quot;&gt;\n&lt;\/form&gt;\n&lt;div id=&quot;errorMessages&quot;&gt;&lt;\/div&gt;\n\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Validasi dengan JavaScript<\/h4>\n\n\n\n<p>Kita akan tambahkan validasi agar form ini hanya bisa dikirim jika semua data sudah benar.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Ambil Elemen Form<\/strong><\/li><\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst form = document.getElementById(&#039;myForm&#039;);\nconst errorMessages = document.getElementById(&#039;errorMessages&#039;);\n\n<\/pre><\/div>\n\n\n<p><strong>2. Tambahkan Event Listener<\/strong>. Kita ingin menjalankan validasi saat form dikirim.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nform.addEventListener(&#039;submit&#039;, function(event) {\n  event.preventDefault(); \/\/ Mencegah form dikirim langsung\n  validateForm();\n});\n\n<\/pre><\/div>\n\n\n<p>3. <strong>Buat Fungsi Validasi<\/strong>. Sekarang kita buat fungsi yang memeriksa apakah semua data sudah benar.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction validateForm() {\n  let errors = &#x5B;];\n  \n  \/\/ Validasi Nama\n  const name = document.getElementById(&#039;name&#039;).value;\n  if (name.trim() === &#039;&#039;) {\n    errors.push(&#039;Nama harus diisi.&#039;);\n  }\n  \n  \/\/ Validasi Email\n  const email = document.getElementById(&#039;email&#039;).value;\n  if (email.trim() === &#039;&#039;) {\n    errors.push(&#039;Email harus diisi.&#039;);\n  } else if (!validateEmail(email)) {\n    errors.push(&#039;Email tidak valid.&#039;);\n  }\n  \n  \/\/ Tampilkan Pesan Kesalahan\n  if (errors.length &gt; 0) {\n    errorMessages.innerHTML = errors.join(&#039;&lt;br&gt;&#039;);\n  } else {\n    errorMessages.innerHTML = &#039;Form berhasil dikirim!&#039;;\n    form.submit(); \/\/ Kirim form jika tidak ada kesalahan\n  }\n}\n\nfunction validateEmail(email) {\n  const re = \/^&#x5B;^\\s@]+@&#x5B;^\\s@]+\\.&#x5B;^\\s@]+$\/;\n  return re.test(String(email).toLowerCase());\n}\n\n<\/pre><\/div>\n\n\n<p>Selamat mencoba dan semoga berhasil!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kamu pasti pernah mengisi formulir online, kan? Nah, validasi form adalah salah satu hal penting yang memastikan data yang kamu masukkan benar dan sesuai. Yuk,<\/p>\n","protected":false},"author":1,"featured_media":12991,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4673,3,4],"tags":[2695,4880,864,4879],"class_list":["post-13159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-javascript","category-belajar-web-design","category-belajar-web-programming","tag-form-validasi","tag-js-validation-form","tag-validasi-form","tag-validasi-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Validasi Form dengan JavaScript - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Validasi Form dengan JavaScript - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Kamu pasti pernah mengisi formulir online, kan? Nah, validasi form adalah salah satu hal penting yang memastikan data yang kamu masukkan benar dan sesuai. Yuk,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-18T05:10:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-18T05:18:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2023\/11\/js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"Validasi Form dengan JavaScript\",\"datePublished\":\"2024-06-18T05:10:07+00:00\",\"dateModified\":\"2024-06-18T05:18:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/\"},\"wordCount\":128,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/js.png\",\"keywords\":[\"form validasi\",\"js validation form\",\"validasi form\",\"validasi javascript\"],\"articleSection\":[\"Belajar JavaScript\",\"Belajar Web Design\",\"Belajar Web Programming\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/\",\"name\":\"Validasi Form dengan JavaScript - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/js.png\",\"datePublished\":\"2024-06-18T05:10:07+00:00\",\"dateModified\":\"2024-06-18T05:18:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/js.png\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/js.png\",\"width\":\"750\",\"height\":\"400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/validasi-form-dengan-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Validasi Form dengan JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Validasi Form dengan JavaScript - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Validasi Form dengan JavaScript - WebHozz Blog","og_description":"Kamu pasti pernah mengisi formulir online, kan? Nah, validasi form adalah salah satu hal penting yang memastikan data yang kamu masukkan benar dan sesuai. Yuk,","og_url":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/","og_site_name":"WebHozz Blog","article_published_time":"2024-06-18T05:10:07+00:00","article_modified_time":"2024-06-18T05:18:03+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2023\/11\/js.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"Validasi Form dengan JavaScript","datePublished":"2024-06-18T05:10:07+00:00","dateModified":"2024-06-18T05:18:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/"},"wordCount":128,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2023\/11\/js.png","keywords":["form validasi","js validation form","validasi form","validasi javascript"],"articleSection":["Belajar JavaScript","Belajar Web Design","Belajar Web Programming"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/","url":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/","name":"Validasi Form dengan JavaScript - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2023\/11\/js.png","datePublished":"2024-06-18T05:10:07+00:00","dateModified":"2024-06-18T05:18:03+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2023\/11\/js.png","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2023\/11\/js.png","width":"750","height":"400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/validasi-form-dengan-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Validasi Form dengan JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/13159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=13159"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/13159\/revisions"}],"predecessor-version":[{"id":13161,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/13159\/revisions\/13161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/12991"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=13159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=13159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=13159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}