{"id":6579,"date":"2024-01-17T16:47:00","date_gmt":"2024-01-17T16:47:00","guid":{"rendered":"https:\/\/codehim.com\/?p=6579"},"modified":"2024-01-22T14:48:59","modified_gmt":"2024-01-22T09:48:59","slug":"contact-form-validation-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/","title":{"rendered":"Contact Form Validation in JavaScript"},"content":{"rendered":"<p>The &#8220;Form Validation&#8221; is a lightweight JavaScript plugin to validate the contact form. It uses the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/RegExp\" target=\"_blank\" rel=\"noopener\">JavaScript RegExp object<\/a> to validate the username, email, and phone number. The regular expressions match the characters on the form submit event and return an error message in case of an invalid entry. The contact form comes with a simple and clean design with all necessary inputs. So, it&#8217;s ready to integrate into your project.<\/p>\n<h2>How to Create Contact Form Validation in JavaScript<\/h2>\n<p>1. First of all, create the HTML form element with name, email, phone, and message input. Create a span element with the class name &#8220;errors&#8221; and place it after each input. Similarly, create a submit button, wrap the form element into a div element and define a class name &#8220;form-container&#8221;.<\/p>\n<pre class=\"prettyprint linenums lang-html\"> &lt;div class=\"form-container\"&gt;\r\n  &lt;h1&gt;Contact Form&lt;\/h1&gt;\r\n  &lt;form name=\"contactForm\" method=\"post\" onsubmit = \"return validate()\" action=\"#\"&gt;\r\n    &lt;label for=\"name\"&gt;* Name&lt;\/label&gt;\r\n    &lt;input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Your name\" &gt;\r\n    &lt;span class=\"errors\"&gt;&lt;\/span&gt;&lt;br&gt;\r\n\r\n    &lt;label for=\"email\"&gt;* Email&lt;\/label&gt;\r\n    &lt;input type=\"text\" placeholder=\"Email address\" id=\"email\" name=\"email\" &gt;\r\n    &lt;span class=\"errors\"&gt;&lt;\/span&gt;&lt;br&gt;\r\n\r\n    &lt;label for=\"phone\"&gt;* Phone&lt;\/label&gt;\r\n    &lt;input type=\"text\" placeholder=\"Phone number\" id=\"phone\" name=\"phone\" &gt;\r\n    &lt;span class=\"errors\"&gt;&lt;\/span&gt;&lt;br&gt;\r\n    \r\n    &lt;label for=\"subject\"&gt;* Message&lt;\/label&gt;\r\n    &lt;textarea placeholder=\"Your message\" cols=\"132\" rows=\"5\" name=\"subject\" id=\"subject\"&gt;&lt;\/textarea&gt;\r\n    &lt;span class=\"errors\"&gt;&lt;\/span&gt;&lt;br&gt;\r\n\r\n    &lt;button type=\"submit\" value=\"Submit\"&gt;Submit&lt;\/button&gt;\r\n  &lt;\/form&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>2. After that, add the following CSS styles to your project to design the contact form. You can set the custom values for CSS to customize the contact form.<\/p>\n<pre class=\"prettyprint linenums lang-css\">body {\r\n  font-family: sans-serif;\r\n}\r\n.form-container {\r\n  width: 50%;\r\n  margin: auto;\r\n  padding: 2%;\r\n  border: 1px solid #f7f7f7;\r\n}\r\nlabel {\r\n  display: block;\r\n  margin-top: 25px;\r\n  font-size: 1rem;\r\n}\r\ninput, textarea {\r\n  width: 80%;\r\n  padding: 15px;\r\n  font-size: 1rem;\r\n  border: 1px solid #ccc;\r\n}\r\nbutton {\r\n  width: 82.5%;\r\n  height: 50px;\r\n  border-radius: 5px;\r\n  color: #fff;\r\n  background: red;\r\n  line-height: 1rem;\r\n  font-size: 1rem;\r\n  cursor: pointer;\r\n  border: 1px solid red;\r\n  margin-top: 25px;\r\n  transition: color .4s ease-out, background .4s ease-out;\r\n}\r\nbutton:hover {\r\n  color: red;\r\n  background: #fff;\r\n}\r\n.errors {\r\n  display: block;\r\n  color: red;\r\n  margin-top: 5px;\r\n}\r\n.error {\r\n  -webkit-transition: .2s;\r\n  -moz-transition: .2s;\r\n  -ms-transition: .2s;\r\n  -o-transition: .2s;\r\n  transition: .2s;\r\n  box-shadow: 0 0 15px 0 rgba(255,36,0,1);\r\n}<\/pre>\n<p>3. Finally, add the following JavaScript validate function between the &lt;script&gt; and &lt;\/script&gt; tag before closing the body element. Trigger this function on the form submit event as described in the HTML code.<\/p>\n<pre class=\"prettyprint linenums lang-js\">var validate = function(e) {\r\n    var fields = document.querySelectorAll('.form-container textarea, .form-container input[type=\"text\"]');\r\n    var regEx;\r\n    var removeSpan;\r\n    var par;\r\n    var check = false;\r\n    var val;\r\n    var errArr = [];\r\n\r\n    for (var i = 0; i &lt; fields.length; i++) {\r\n        if (fields[i].value === \"\") {\r\n          \r\n            if (fields[i].nextElementSibling.classList.contains('error')) {\r\n              removeSpan = fields[i].nextElementSibling;\r\n              par = fields[i].parentNode;\r\n              par.removeChild(removeSpan);\r\n              fields[i].nextElementSibling.innerHTML = \"Hmmm! \" + fields[i].placeholder + \" is required?\";\r\n              fields[i].style.boxShadow = \"0 0 2px 1px #cc0001\";\r\n              check = false;\r\n              errArr.push(fields[i]);\r\n            }\r\n            fields[i].nextElementSibling.innerHTML = \"Hmmm! \" + fields[i].placeholder + \" is required?\";\r\n            fields[i].style.boxShadow = \"0 0 2px 1px #cc0001\";\r\n            check = false;\r\n            errArr.push(fields[i]);\r\n        } else {\r\n\r\n            \/\/ check if message and name values contain valid characters.\r\n            if (fields[i].id !== 'email' &amp;&amp; fields[i].id !== 'phone') {\r\n                val = isValidChar(fields[i]);\r\n                if(val === false) {\r\n                  fields[i].nextElementSibling.innerHTML = \"Are you trying to HACK ME!\";\r\n                  fields[i].style.boxShadow = \"0 0 2px 1px #cc0001\";\r\n                  check = false;\r\n                  errArr.push(fields[i]);\r\n                } else {\r\n                  fields[i].nextElementSibling.innerHTML = \"\";\r\n                  fields[i].style.boxShadow = \"none\";\r\n                  check = true;\r\n                }\r\n            }\r\n          \r\n            if(fields[i].id === 'phone') {\r\n              val = isValidPhone(fields[i]);\r\n              if(val === false) {\r\n                fields[i].nextElementSibling.innerHTML = \"Hmmm! Your phone number is not valid?\";\r\n                fields[i].style.boxShadow = \"0 0 2px 1px #cc0001\";\r\n                check = false;\r\n                errArr.push(fields[i]);\r\n              } else {\r\n                fields[i].nextElementSibling.innerHTML = \"\";\r\n                fields[i].style.boxShadow = \"none\";\r\n                check = true;  \r\n              }\r\n            }\r\n\r\n            if (fields[i].id === 'email') {\r\n                val = isValidEmail(fields[i]);\r\n                if(val === false) {\r\n                    fields[i].nextElementSibling.innerHTML = \"Hmmm! Your email address is not valid?\";\r\n                    fields[i].style.boxShadow = \"0 0 2px 1px #cc0001\";\r\n                    check = false;\r\n                    errArr.push(fields[i]);\r\n                } else {\r\n                    fields[i].nextElementSibling.innerHTML = \"\";\r\n                    fields[i].style.boxShadow = \"none\";\r\n                    check = true;\r\n                }\r\n            }\r\n        }\r\n    }\r\n  \r\n    if(check === false) {\r\n      var count = 0;\r\n      var toErr = setInterval(function() {\r\n        var e = errArr[0].offsetTop + -25;\r\n        var pos = Math.abs(e);\r\n        if(count &lt; pos) {\r\n          count ++;\r\n          window.scrollTo(0, count);\r\n        } else {\r\n          clearInterval(toErr);\r\n        }\r\n      }, 1);\r\n    }\r\n    \r\n    return check\r\n\r\n    \/\/ Helper functions.\r\n    function isValidEmail(e) {\r\n        regEx = \/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$\/;\r\n        var email = e.value;\r\n        if (!regEx.test(email)) {\r\n            return false;\r\n        }\r\n    }\r\n\r\n    function isValidChar(e) {\r\n        regEx = \/^[a-zA-Z@#$%!?^&amp;*()_+\\-=\\[\\]{};':\"\\\\|,.\\\/? ]*$\/;\r\n        var value = e.value;\r\n        if (!regEx.test(value)) {\r\n            return false;\r\n        }\r\n    }\r\n  \r\n    function isValidPhone(e) {\r\n      regEx = \/^[+]?[(]?[+]?\\d{2,4}[)]?[-\\s]?\\d{2,8}[-\\s]?\\d{2,8}$\/;\r\n      var value = e.value;\r\n      if(!regEx.test(value)) {\r\n        return false;\r\n      }\r\n    }\r\n};<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully integrated this contact form validation code snippet into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The &#8220;Form Validation&#8221; is a lightweight JavaScript plugin to validate the contact form. It uses the JavaScript RegExp object to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6593,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[232,97],"tags":[239],"class_list":["post-6579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-forms","category-text-input","tag-contact-us-forms"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Contact Form Validation in JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is lightweight JavaScript code snippet for contact form validation. You can view demo and download the source code to validate form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Contact Form Validation in JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is lightweight JavaScript code snippet for contact form validation. You can view demo and download the source code to validate form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-17T16:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:48:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Contact Form Validation in JavaScript\",\"datePublished\":\"2024-01-17T16:47:00+00:00\",\"dateModified\":\"2024-01-22T09:48:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\"},\"wordCount\":229,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png\",\"keywords\":[\"Contact Us Forms\"],\"articleSection\":[\"Forms\",\"Text &amp; Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\",\"name\":\"Contact Form Validation in JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png\",\"datePublished\":\"2024-01-17T16:47:00+00:00\",\"dateModified\":\"2024-01-22T09:48:59+00:00\",\"description\":\"Here is lightweight JavaScript code snippet for contact form validation. You can view demo and download the source code to validate form.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png\",\"width\":1280,\"height\":960,\"caption\":\"Contact Form Validation in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text &amp; Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Contact Form Validation in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Contact Form Validation in JavaScript &#8212; CodeHim","description":"Here is lightweight JavaScript code snippet for contact form validation. You can view demo and download the source code to validate form.","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:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Contact Form Validation in JavaScript &#8212; CodeHim","og_description":"Here is lightweight JavaScript code snippet for contact form validation. You can view demo and download the source code to validate form.","og_url":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-17T16:47:00+00:00","article_modified_time":"2024-01-22T09:48:59+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Contact Form Validation in JavaScript","datePublished":"2024-01-17T16:47:00+00:00","dateModified":"2024-01-22T09:48:59+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/"},"wordCount":229,"commentCount":4,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png","keywords":["Contact Us Forms"],"articleSection":["Forms","Text &amp; Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/","url":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/","name":"Contact Form Validation in JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png","datePublished":"2024-01-17T16:47:00+00:00","dateModified":"2024-01-22T09:48:59+00:00","description":"Here is lightweight JavaScript code snippet for contact form validation. You can view demo and download the source code to validate form.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Contact-Form-Validation-in-.png","width":1280,"height":960,"caption":"Contact Form Validation in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/contact-form-validation-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text &amp; Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Contact Form Validation in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":16758,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6579"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6593"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}