{"id":11235,"date":"2021-11-16T03:02:13","date_gmt":"2021-11-16T03:02:13","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/?p=11235"},"modified":"2021-11-17T00:55:49","modified_gmt":"2021-11-17T00:55:49","slug":"validations-in-html5-forms","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/","title":{"rendered":"Validations in HTML5 Forms"},"content":{"rendered":"<p>When web developers build forms in any Internet application, it is a must to apply validation. Validating forms is a crucial process in any application development process because it helps to prevent security threats or junk data in your database. Applying validations on the server-side can be performed conveniently through a framework or developer tools used in the backend. On the front-end, however, it is sometimes painful for developers to validate forms as it involves lots of effort. You are also required to use lots of JavaScript libraries for HTML form validations as well, increasing the knowledge and effort involved.<\/p>\n<p>To overcome this issue, HTML5 gives us a number of features to validate forms. These features can handle most of your validation needs without requiring any JavaScript code. HTML5 also makes it easier to control styling with CSS. In addition, it also provides built-in validation features through the use of special attributes and new input types.<\/p>\n<p><strong>Read: <\/strong><a href=\"https:\/\/www.htmlgoodies.com\/html5\/introduction-to-html5-forms\/\" target=\"_blank\" rel=\"noopener\">Introduction to HTML5 Forms<\/a><\/p>\n<h2>HTML5 Input Types and Attributes<\/h2>\n<p>Below is a list of some of the new input types and associated attributes featured in HTML5:<\/p>\n<ul>\n<li><strong>number<\/strong><\/li>\n<li><strong>email<\/strong><\/li>\n<li><strong>search<\/strong><\/li>\n<li><strong>tel<\/strong><\/li>\n<li><strong>url<\/strong><\/li>\n<li><strong>range<\/strong><\/li>\n<li><strong>color<\/strong><\/li>\n<li><strong>date<\/strong><\/li>\n<li><strong>month<\/strong><\/li>\n<li><strong>week<\/strong><\/li>\n<li><strong>time<\/strong><\/li>\n<\/ul>\n<p>New attributes introduced in HTML5 include:<\/p>\n<ul>\n<li><strong>required<\/strong><\/li>\n<li><strong>autofocus<\/strong><\/li>\n<li><strong>autocomplete<\/strong><\/li>\n<li><strong>placeholder<\/strong><\/li>\n<li><strong>minlength<\/strong><\/li>\n<li><strong>readonly<\/strong><\/li>\n<li><strong>pattern<\/strong><\/li>\n<li><strong>list<\/strong><\/li>\n<\/ul>\n<h2>HTML5 Form Validation Example<\/h2>\n<p>Knowing the new HTML5 input types and attributes is necessary to validate forms. We cover this process in our next section.<\/p>\n<h3>The \u2018required\u2019 attribute in HTML5<\/h3>\n<p>By simply adding the <b>required<\/b> attribute to any <strong>&lt;input&gt;<\/strong>, <strong>&lt;textarea&gt;<\/strong>, or <strong>&lt;select&gt;<\/strong> element, you tell the browser that some value is required in this field:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;form&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">&lt;span&gt;Name&lt;\/span&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;input type=\"text\" name=\"name\" required&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt; <\/span><\/pre>\n<p><img class=\"alignnone size-full wp-image-11240\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/HTML5-Form-Input-Validation-examples.png\" alt=\"How to validate input in HTML5 Forms\" width=\"377\" height=\"129\" srcset=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/HTML5-Form-Input-Validation-examples.png 377w, https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/HTML5-Form-Input-Validation-examples-300x103.png 300w\" sizes=\"(max-width: 377px) 100vw, 377px\" \/><\/p>\n<p>When a user tries to submit this form without entering the required field, it will show a warning message or it simply prevents the form from being submitted.<\/p>\n<p>You can also use the <b>required <\/b>attribute on checkboxes, radio buttons, and select dropdowns. With that applied on a form field, a form control with a blank value cannot be submitted.<\/p>\n<p><strong>Read:\u00a0<\/strong><a href=\"https:\/\/www.htmlgoodies.com\/html\/build-web-forms-html\/\" target=\"_blank\" rel=\"noopener\">How to Build a Web Form with HTML<\/a><\/p>\n<h3>Limit Number Values on HTML5 Forms<\/h3>\n<p>With HTML5, now you can set the limits on the maximum and minimum values for numbers. For instance, this method prevents any string longer than the field\u2019s max limit from being entered. If you try to paste a string which exceeds the limit of the field, the form will clip the string accordingly.<\/p>\n<p>If you are using a text field or <strong>textarea<\/strong>, then you need to use the <b>maxlength<\/b> attribute instead:<\/p>\n<form>\n<pre><span style=\"font-weight: 400;\">&lt;form&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;span&gt;Age&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;input\u00a0type=\"number\"\u00a0name=\"age\"\u00a0min=\"18\" max=\"90\"\u00a0required&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt;<\/span><\/pre>\n<\/form>\n<h3><img class=\"alignnone size-full wp-image-11239\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/input-validation-HTML5.png\" alt=\"Input Validtion HTML5\" width=\"172\" height=\"91\" \/><\/h3>\n<h3>The patterns Attribute in HTML5<\/h3>\n<p>The <b>patterns<\/b> attribute allows web developers to use <i>regular expressions<\/i>. When this attribute is applied, it tells the browser to compare the value of <i>regex<\/i> with the input supplied by the user; if it matches, then only the form can be submitted. Regular expressions are primarily used for filtering data and provide great control over input entered into web forms.<\/p>\n<p>The following code snippet shows how to use regular expressions in HTML5 forms:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;input\u00a0type=\"password\"\u00a0required\u00a0pattern=\"^(?=.*\\d)[0-9a-zA-Z]{6,}$\"\u00a0title=\"Password\u00a0should\u00a0be\u00a0a\u00a0minimum\u00a0of\u00a06\u00a0character\u00a0long\u00a0and\u00a0must\u00a0contain\u00a0at\u00a0least\u00a0one\u00a0number\"&gt;<\/span><\/pre>\n<p><img class=\"alignnone size-full wp-image-11238\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/HTML5-input-limits.png\" alt=\"HTML5 Input Limits\" width=\"638\" height=\"161\" srcset=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/HTML5-input-limits.png 638w, https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/HTML5-input-limits-300x76.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/p>\n<p>In this example, a regular expression is applied to a password field, which tells the browser to only accept the password which contains at least 6 characters, with at least one numeric value. This is how the <b>pattern<\/b> attribute uses regular expressions to filter data.<\/p>\n<h2>Styling with CSS in HTML5<\/h2>\n<p>CSS3 comes with handy pseudo-classes which allow us to style any form field depending on its state. These classes are as follows:<\/p>\n<ul>\n<li><strong>:valid<\/strong><\/li>\n<li><strong>:invalid<\/strong><\/li>\n<li><strong>:required<\/strong><\/li>\n<li><strong>:optional<\/strong><\/li>\n<li><strong>:in-range<\/strong><\/li>\n<li><strong>:out-of-range<\/strong><\/li>\n<li><strong>:read-only<\/strong><\/li>\n<li><strong>:read-write<\/strong><\/li>\n<\/ul>\n<p>To understand how these CSS pseudo-classes work, consider the following code example:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;form&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">&lt;span&gt;Age&lt;\/span&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;input type=\"number\" name=\"age\" min=\"18\" required&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt;<\/span><\/pre>\n<form>The following set of styles can be used to mark the input box as invalid by coloring the border red. It applies to input that has a condition that has not yet been met. For example, in the \u201c<b>Age<\/b>\u201d field, if you enter any value less than <b>18<\/b>, the border color changes to red, marking it as an incorrect field.<\/p>\n<\/form>\n<pre><span style=\"font-weight: 400;\">&lt;style type=\"text\/css\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">  input:focus:invalid<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border:1px\u00a0solid\u00a0#F5192F;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0box-shadow:0\u00a00\u00a04px\u00a0#F5192F;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><img class=\"alignnone size-full wp-image-11237\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/Form-validation-HTML5-examples.png\" alt=\"HTML5 Form Validation\" width=\"117\" height=\"86\" srcset=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/Form-validation-HTML5-examples.png 117w, https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/Form-validation-HTML5-examples-80x60.png 80w\" sizes=\"(max-width: 117px) 100vw, 117px\" \/><\/p>\n<p>For input that is valid, you can use the following styles:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;style type=\"text\/css\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input:focus:valid,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border:\u00a01px\u00a0solid\u00a0#64C364;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0box-shadow:\u00a00\u00a00\u00a04px\u00a0#64C364;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<h2><img class=\"alignnone size-full wp-image-11236\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/11\/validating-HTML5-forms.png\" alt=\"Validate HTML5 Forms\" width=\"127\" height=\"86\" \/><\/h2>\n<p><strong>Read:<\/strong> <a href=\"https:\/\/www.htmlgoodies.com\/css\/style-radio-buttons-checkboxes-css\/\" target=\"_blank\" rel=\"noopener\">Styling Radio Buttons and Checkboxes in HTML Forms<\/a><\/p>\n<h2>Other HTML5 Input Types<\/h2>\n<p>HTML5 introduced some new input types. These input types are user-friendly and work perfectly on mobile-based browsers, as well as, desktop-based browsers. They were invented for accepting only specified data. Here is the list of some frequently used HTML5 input types:<\/p>\n<ul>\n<li><strong>url<\/strong><\/li>\n<li><strong>color<\/strong><\/li>\n<li><strong>date<\/strong><\/li>\n<li><strong>search<\/strong><\/li>\n<li><strong>tel<\/strong><\/li>\n<li><strong>time<\/strong><\/li>\n<\/ul>\n<p>To use any of these input types, you can include them as the value of the type attribute. For instance, take a look at the following code snippet:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;input type=\"url\" placeholder=\"Enter your Website\" required&gt;<\/span><\/pre>\n<p>Note that some of the input fields, such as \u201c<b>tel<\/b>\u201d and \u201c<b>email<\/b>\u201d behave differently on a mobile device. They will cause a mobile device to open a specific keyboard with a limited number of keys, and not the full <b>QWERTY<\/b> keyboard. Another thing to take note of is that if any specific input type is not supported on a browser, it will simply behave as a regular text input field on that browser.<\/p>\n<p>We hope this post helped you to get up to speed with validating HTML5 forms. Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When web developers build forms in any Internet application, it is a must to apply validation. Validating forms is a crucial process in any application development process because it helps to prevent security threats or junk data in your database. Applying validations on the server-side can be performed conveniently through a framework or developer tools [&hellip;]<\/p>\n","protected":false},"author":121,"featured_media":2997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30617,30618],"tags":[4810,30790,3448,2003],"b2b_audience":[37],"b2b_industry":[65],"b2b_product":[76,131,133,107,94,99,80,128,98],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Validations in HTML5 Forms | www.HTMLGoodies.com<\/title>\n<meta name=\"description\" content=\"Learn how to validate input in HTML5 forms in this web development and HTML5 tutorial. Code along with examples.\" \/>\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.htmlgoodies.com\/html5\/validations-in-html5-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Validations in HTML5 Forms | www.HTMLGoodies.com\" \/>\n<meta property=\"og:description\" content=\"Learn how to validate input in HTML5 forms in this web development and HTML5 tutorial. Code along with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Goodies\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-16T03:02:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-17T00:55:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"507\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:site\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tariq Siddiqui\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\",\"name\":\"HTML Goodies\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/htmlgoodies\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"width\":584,\"height\":136,\"caption\":\"HTML Goodies\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"name\":\"HTML Goodies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.htmlgoodies.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#primaryimage\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg\",\"width\":507,\"height\":337,\"caption\":\"HTML% Web Development Tutorials\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#webpage\",\"url\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/\",\"name\":\"Validations in HTML5 Forms | www.HTMLGoodies.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#primaryimage\"},\"datePublished\":\"2021-11-16T03:02:13+00:00\",\"dateModified\":\"2021-11-17T00:55:49+00:00\",\"description\":\"Learn how to validate input in HTML5 forms in this web development and HTML5 tutorial. Code along with examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.htmlgoodies.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Validations in HTML5 Forms\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/165c40fc1987c3b2daa20921540ad516\"},\"headline\":\"Validations in HTML5 Forms\",\"datePublished\":\"2021-11-16T03:02:13+00:00\",\"dateModified\":\"2021-11-17T00:55:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#webpage\"},\"wordCount\":837,\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg\",\"keywords\":[\"CSS\",\"forms\",\"HTML\",\"HTML5\"],\"articleSection\":[\"HTML\",\"HTML5\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/165c40fc1987c3b2daa20921540ad516\",\"name\":\"Tariq Siddiqui\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/08\/Tariq-150x150.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/08\/Tariq-150x150.png\",\"caption\":\"Tariq Siddiqui\"},\"description\":\"A graduate in MS Computer Applications and a Web Developer from India with diverse skills across multiple Web development technologies. Enjoys writing about any tech topic, including programming, algorithms and cloud computing. Traveling and playing video games are the hobbies that interest me most.\",\"url\":\"https:\/\/www.htmlgoodies.com\/author\/tariqsiddiqui\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Validations in HTML5 Forms | www.HTMLGoodies.com","description":"Learn how to validate input in HTML5 forms in this web development and HTML5 tutorial. Code along with examples.","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.htmlgoodies.com\/html5\/validations-in-html5-forms\/","og_locale":"en_US","og_type":"article","og_title":"Validations in HTML5 Forms | www.HTMLGoodies.com","og_description":"Learn how to validate input in HTML5 forms in this web development and HTML5 tutorial. Code along with examples.","og_url":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/","og_site_name":"HTML Goodies","article_published_time":"2021-11-16T03:02:13+00:00","article_modified_time":"2021-11-17T00:55:49+00:00","og_image":[{"width":507,"height":337,"url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@htmlgoodies","twitter_site":"@htmlgoodies","twitter_misc":{"Written by":"Tariq Siddiqui","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.htmlgoodies.com\/#organization","name":"HTML Goodies","url":"https:\/\/www.htmlgoodies.com\/","sameAs":["https:\/\/twitter.com\/htmlgoodies"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","width":584,"height":136,"caption":"HTML Goodies"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.htmlgoodies.com\/#website","url":"https:\/\/www.htmlgoodies.com\/","name":"HTML Goodies","description":"","publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.htmlgoodies.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#primaryimage","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg","width":507,"height":337,"caption":"HTML% Web Development Tutorials"},{"@type":"WebPage","@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#webpage","url":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/","name":"Validations in HTML5 Forms | www.HTMLGoodies.com","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#primaryimage"},"datePublished":"2021-11-16T03:02:13+00:00","dateModified":"2021-11-17T00:55:49+00:00","description":"Learn how to validate input in HTML5 forms in this web development and HTML5 tutorial. Code along with examples.","breadcrumb":{"@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.htmlgoodies.com\/"},{"@type":"ListItem","position":2,"name":"Validations in HTML5 Forms"}]},{"@type":"Article","@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#article","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#webpage"},"author":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/165c40fc1987c3b2daa20921540ad516"},"headline":"Validations in HTML5 Forms","datePublished":"2021-11-16T03:02:13+00:00","dateModified":"2021-11-17T00:55:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#webpage"},"wordCount":837,"publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/html5\/validations-in-html5-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/04\/176994452.jpg","keywords":["CSS","forms","HTML","HTML5"],"articleSection":["HTML","HTML5"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/165c40fc1987c3b2daa20921540ad516","name":"Tariq Siddiqui","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/08\/Tariq-150x150.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/08\/Tariq-150x150.png","caption":"Tariq Siddiqui"},"description":"A graduate in MS Computer Applications and a Web Developer from India with diverse skills across multiple Web development technologies. Enjoys writing about any tech topic, including programming, algorithms and cloud computing. Traveling and playing video games are the hobbies that interest me most.","url":"https:\/\/www.htmlgoodies.com\/author\/tariqsiddiqui\/"}]}},"_links":{"self":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/11235"}],"collection":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/users\/121"}],"replies":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/comments?post=11235"}],"version-history":[{"count":0,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/11235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media?parent=11235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/categories?post=11235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/tags?post=11235"},{"taxonomy":"b2b_audience","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_audience?post=11235"},{"taxonomy":"b2b_industry","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_industry?post=11235"},{"taxonomy":"b2b_product","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_product?post=11235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}