{"id":28031,"date":"2016-09-19T23:01:43","date_gmt":"2016-09-19T15:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28031"},"modified":"2022-07-15T16:58:42","modified_gmt":"2022-07-15T08:58:42","slug":"html5-constraint-validation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/","title":{"rendered":"Intro Into HTML5 Constraint Validation"},"content":{"rendered":"

Interactive websites and applications can\u2019t be imagined without forms that enable us to connect with our users<\/strong>, and to obtain the data<\/strong> we need in order to secure smooth transactions with them. We do need valid user input<\/strong>, however we need to acquire it in a way that doesn\u2019t frustrate<\/strong> our users too much.<\/p>\n

While we can improve the usability of our forms with smartly chosen UX design patterns, HTML5 also has a native mechanism for constraint validation<\/a> that allow us to catch input errors right in the front-end<\/strong>.<\/p>\n

In this post, we\u2019ll focus on browser-supplied constraint validation<\/strong>, and look into how frontend developers can secure valid user input using HTML5<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t4 Form Design UX Tips You Should Know (With Examples)<\/a>\n\t\t\t\t<\/p>\n

Why We Need Front-End Input Validation<\/h2>\n

Input validation<\/strong> has two main goals. The content we get needs to be:<\/p>\n

1. Useful<\/h3>\n

We need usable data we can work with<\/strong>. We need to make people enter realistic data in the right format<\/strong>. For instance, no one who is alive today was born 200 years ago. Getting data like this may seem funny at first, but on the long term it\u2019s annoying, and populates our database with useless data.<\/p>\n

2. Secure<\/strong><\/strong><\/h3>\n

When referring to security, this means we need to prevent the injection of malicious content<\/strong> \u2014 whether deliberate or by accident.<\/p>\n

Usefulness (getting reasonable data) can be achieved only on the client side<\/strong>, the backend team can\u2019t help too much with this. To attain security<\/strong>, front- and backend developers need to work together<\/strong>.<\/p>\n

If frontend developers properly validate input on the client side, the backend team will have to deal with much less vulnerabilities<\/strong>. Hacking (a site) often entails submitting extra data<\/strong>, or data in the wrong format<\/strong>. Developers can fight security holes like these, successfully fight from the front-end.<\/p>\n

For instance, this PHP security guide<\/a> recommends to check everything we can on the client side. They emphasize the importance of frontend input validation by giving many examples, such as:<\/p>\n

\"Input validation works best with extremely restricted values, e.g. when something must be an integer, or an alphanumeric string, or a HTTP URL.\"<\/p><\/blockquote>\n

In frontend input validation, our job is to impose reasonable constraints<\/strong> on user input. HTML5\u2019s constraint validation feature provides us with the means to do so.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHTML5 Tutorial: Login Page with HTML5 Forms<\/a>\n\t\t\t\t<\/p>\n

HTML5 Constraint Validation<\/h2>\n

Before HTML5, frontend developers were limited to validating user input with JavaScript<\/strong>, which was a tedious and error-prone process. To improve client-side form validation, HTML5 has introduced a constraint validation<\/a><\/strong> algorithm that runs in modern browsers<\/a>, and checks the validity of the submitted input<\/strong>.<\/p>\n

To make the evaluation, the algorithm uses the validation-related attributes of input elements<\/strong>, such as <input><\/code>, <textarea><\/code>, and <select><\/code>. If you want to know how constraint validation happens step by step in the browser check out this WhatWG doc<\/a>.<\/p>\n

Thanks to HTML5\u2019s constraint validation feature, we can execute all standard input validation tasks<\/strong> on the client side without JavaScript, solely with HTML5<\/strong>.<\/p>\n

To perform more complex validation-related tasks, HTML5 provides us with a Constraint Validation JavaScript API<\/a><\/strong> we can use to set up our custom validation scripts.<\/p>\n

Validate with Semantic Input Types<\/h2>\n

HTML5 has introduced semantic<\/a> input types<\/strong> that \u2014 apart from indicating the meaning of the element for user agents \u2014 can also be used to validate user input<\/strong> by limiting users to a certain input format.<\/p>\n

Besides the input types that have already existed before HTML5 (text<\/code>, password<\/code>, submit<\/code>, reset<\/code>, radio<\/code>, checkbox<\/code>, button<\/code>, hidden<\/code>), we can also use the following semantic HTML5 input types<\/strong>: email<\/code><\/a>,\ntel<\/code><\/a>,\nurl<\/code><\/a>,\nnumber<\/code><\/a>,\ntime<\/code><\/a>,\ndate<\/code><\/a>,\ndatetime<\/code><\/a>,\ndatetime-local<\/code><\/a>, month<\/code><\/a>,\nweek<\/code><\/a>, range<\/code><\/a>, search<\/code><\/a>,\ncolor<\/code><\/a>.<\/p>\n

We can safely use HTML5 input types with older browsers, as they will behave as an <input type=\"text\"><\/code> field in browsers that don\u2019t support them.<\/p>\n

\nRecommended Reading:<\/strong>\nA Look Into HTML5 Forms Input Types: Date, Color and Range<\/a><\/p>\n

Let\u2019s see what happens when the user enters the wrong input type. Say we have created an email input field with the following code:<\/p>\n

\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n\t <label for=\"youremail\">Your Email:<\/label>\r\n\t <input type=\"email\" name=\"email\" id=\"youremail\">\r\n\t <input type=\"submit\" value=\"Submit\">\r\n <\/form>\r\n<\/pre>\n
When the user types a string that doesn\u2019t use an email format, the constraint validation algorithm doesn\u2019t submit the form<\/strong>, and returns an error message<\/strong>:<\/p>\n
\"Email<\/figure>\n
The same rule applies to other input types as well, for example for type=\"url\"<\/code> users can only submit an input that follows the URL format (starts with a protocol, such as http:\/\/<\/code> or ftp:\/\/<\/code>).<\/p>\n
Some input types use a design that doesn\u2019t even allow users to enter a wrong input format<\/strong>, for example color<\/code> and range<\/code>.<\/p>\n
\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n  <label for=\"bgcol\">Background Color:<\/label>\r\n  <input type=\"color\" name=\"color\" id=\"bgcol\">\r\n  <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<\/pre>\n
If we use the color<\/code> input type the user is constrained to either choosing a color from the color picker or staying with the default black. The input field is constrained by design<\/strong>, therefore it doesn\u2019t leave much chance for user error.<\/p>\n
\"Color<\/figure>\n
When it\u2019s appropriate, it\u2019s worth considering using the <select><\/code><\/a> HTML tag which works similarly to these constrained-by-design input types; it lets users  choose from a dropdown list.<\/p>\n
\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n  <label for=\"favfruit\">Your Favourite Fruit:<\/label>\r\n  <select name=\"fruit\" id=\"favfruit\">\r\n    <option value=\"apple\">Apple<\/option>\r\n    <option value=\"pear\">Pear<\/option>\r\n    <option value=\"orange\">Orange<\/option>\r\n    <option value=\"raspberry\">Raspberry<\/option>\r\n  <\/select>\r\n  <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<\/pre>\n
\"Option<\/figure>\n
Use HTML5\u2019s Validation Attributes<\/h2>\n
Using semantic input types sets certain constraints on what users are allowed to submit, but in many cases we want to go a little bit further. This is when the validation-related attributes<\/strong> of the <input><\/code> tag can help us out.<\/p>\n
Validation-related attributes belong to certain input types (they can\u2019t be used on all<\/em> types) on which they impose further constraints.<\/p>\n
1. required<\/code><\/a> for getting a valid input by all means<\/h3>\n
The required<\/code> attribute is the most well-known HTML validation attribute. It\u2019s a boolean attribute<\/strong> which means it doesn\u2019t take any value<\/strong>, we just simply have to place it inside the <input><\/code> tag if we want to use it:<\/p>\n
\r\n<input type=\"email\" name=\"email\" id=\"youremail\" required>\r\n<\/pre>\n
If the user forgets to enter a value into a required input field, the browser returns an error message<\/strong> that warns them to fill in the field, and they can\u2019t submit the form<\/strong> until they have provided a valid input. That\u2019s why it\u2019s important to always mark visually<\/strong> required fields to users.<\/p>\n
The required<\/code> attribute can be used together with the following input types<\/strong>: text<\/code>, search<\/code>, url<\/code>, tel<\/code>, email<\/code>, password<\/code>, date<\/code>, datetime<\/code>, datetime-local<\/code>, month<\/code>, week<\/code>,\ntime<\/code>, number<\/code>, checkbox<\/code>, radio<\/code>, file<\/code>, plus with the <textarea><\/code>and <select><\/code> HTML tags.<\/p>\n
2. min<\/code><\/a>, max<\/code><\/a> and step<\/code><\/a> for number validation<\/h3>\n
The min<\/code>, max<\/code> and step<\/code> attributes enable us to put constraints on number input fields<\/strong>. They can be used together with the range<\/code>, number<\/code>, date<\/code>, month<\/code>, week<\/code>, datetime<\/code>, datetime-local<\/code>, and time<\/code> input types.<\/p>\n
The min<\/code> and max<\/code> attributes provide a great way to easily exclude unreasonable data<\/strong>. For instance the example below forces users to submit an age between 18 and 120.<\/p>\n
\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n  <label for=\"yourage\">Your Age:<\/label>\r\n  <input type=\"number\" name=\"age\" id=\"yourage\" min=\"18\" max=\"120\">\r\n  <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<\/pre>\n
When the constraint validation algorithm bumps into a user input smaller than the min<\/code>, or larger than the max<\/code> value, it prevents it from reaching the backend, and returns an error message.<\/p>\n
\"Age<\/figure>\n
The step<\/code> attribute specifies a numeric interval<\/strong> between the legal values of a numeric input field. For instance, if we want users to choose only from leap years we can add the step=\"4\"<\/code> attribute to the field. In the example below I used the number<\/code> input type, as there\u2019s no type=\"year\"<\/code> in HTML5.<\/p>\n
\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n  <label for=\"yourleapyear\">Your Favourite Leap Year:<\/label>\r\n  <input type=\"number\" name=\"leapyear\" id=\"yourleapyear\"\r\n\t\t\tmin=\"1972\" max=\"2016\" step=\"4\">\r\n  <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<\/pre>\n
With the pre-set constraints, users can only choose from leap years between 1972 and 2016 if they use the little up-arrow that comes with the number<\/code> input type. They can also type a value manually into the input field, but in case it doesn\u2019t meet the constraints, the browser will return an error message.<\/p>\n
\"Step<\/figure>\n
3. maxlength<\/code><\/a> for text length validation<\/h3>\n
The maxlength<\/code> attribute makes it possible to set a maximum character length<\/strong> for textual input fields. It can be used together with the text<\/code>, search<\/code>, url<\/code>, tel<\/code>, email<\/code> and password<\/code> input types, and with the <textarea><\/code> HTML tag.<\/p>\n
The maxlength<\/code> attribute can be an excellent solution for phone number fields that cannot have more than a certain number of characters, or for contact forms where we don\u2019t want users to write more than a certain length.<\/p>\n
The code snippet below shows an example for the latter, it constraints user messages to 500 characters.<\/p>\n
\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n  <label for=\"yourmsg\">Message (max 500 characters):<\/label>\r\n  <textarea name=\"msg\" id=\"yourmsg\" cols=\"25\" rows=\"4\"\r\n\t\t\tmaxlength=\"500\"><\/textarea>\r\n  <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<\/pre>\n
The maxlength<\/code> attribute doesn\u2019t return an error message<\/strong>, but the browser simply doesn\u2019t let users type more than the specified character number. That\u2019s why it\u2019s crucial to inform users about the constraint<\/strong>, otherwise they won\u2019t understand why they can\u2019t go on with the typing.<\/p>\n
4. pattern<\/code><\/a> for Regex validation<\/h3>\n
The pattern<\/code> attribute allow us to use Regular Expressions<\/a><\/strong> in our input validation process. A regular expression is a pre-defined set of characters<\/strong> that form a certain pattern. We can use it either to search strings that follow the pattern, or to enforce a certain format defined by the pattern.<\/p>\n
With the pattern<\/code> attribute we can do the latter \u2014 constrain users to submit their input in a format that matches the given regular expression<\/strong>.<\/p>\n
\nRecommended Reading:<\/strong>\nBeginner\u2019s Guide to Regular Expression (Regex)\n<\/a><\/p>\n
The pattern<\/code> attribute has many use cases, but it can be especially useful when we want to validate a password field<\/strong>.<\/p>\n
The example below requires users to enter a password that\u2019s minimum 8 characters long, and contains at least one letter and one number (source of the regex I used<\/a>).\n<\/p>\n
\r\n<form name=\"form\" action=\"#\" method=\"post\">\r\n  <label for=\"yourpw\">* Your Password:<\/label>\r\n  <input type=\"password\" name=\"pw\" id=\"yourpw\" required\r\n\t\t\t\tpattern=\"^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$\">\r\n  <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<\/pre>\n
A few more things<\/h2>\n
In this article, we had a look at how to make use of the browser-supplied form validation<\/strong> provided by HTML5\u2019s native constraint validation algorithm. For creating our custom validation scripts, we need to use the Constraint Validation API<\/a> that can be the next step in refining form validation skills.<\/p>\n
HTML5 forms are accessible by assistive technologies<\/a>, so we don\u2019t necessarily have to use the aria-required<\/code><\/a> ARIA attribute<\/a> to mark required input fields for screen readers. However it  can still be useful to add accessibility support for older browsers. It\u2019s also possible to opt out of constraint validation<\/strong> by adding the novalidate<\/code><\/a> boolean attribute to the <form><\/code> element.<\/p>","protected":false},"excerpt":{"rendered":"
Interactive websites and applications can\u2019t be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to secure smooth transactions with them. We do need valid user input, however we need to acquire it in a way that doesn\u2019t frustrate our users too much. While…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[1312,506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nIntro Into HTML5 Constraint Validation - Hongkiat<\/title>\n<meta name=\"description\" content=\"Interactive websites and applications can't be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to\" \/>\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.hongkiat.com\/blog\/html5-constraint-validation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Intro Into HTML5 Constraint Validation\" \/>\n<meta property=\"og:description\" content=\"Interactive websites and applications can't be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-19T15:01:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T08:58:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-constraint-validation\/email-validation.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Intro Into HTML5 Constraint Validation\",\"datePublished\":\"2016-09-19T15:01:43+00:00\",\"dateModified\":\"2022-07-15T08:58:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/\"},\"wordCount\":1539,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-constraint-validation\\\/email-validation.jpg\",\"keywords\":[\"Forms\",\"HTML\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/\",\"name\":\"Intro Into HTML5 Constraint Validation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-constraint-validation\\\/email-validation.jpg\",\"datePublished\":\"2016-09-19T15:01:43+00:00\",\"dateModified\":\"2022-07-15T08:58:42+00:00\",\"description\":\"Interactive websites and applications can't be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-constraint-validation\\\/email-validation.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-constraint-validation\\\/email-validation.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-constraint-validation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Intro Into HTML5 Constraint Validation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Intro Into HTML5 Constraint Validation - Hongkiat","description":"Interactive websites and applications can't be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to","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.hongkiat.com\/blog\/html5-constraint-validation\/","og_locale":"en_US","og_type":"article","og_title":"Intro Into HTML5 Constraint Validation","og_description":"Interactive websites and applications can't be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-09-19T15:01:43+00:00","article_modified_time":"2022-07-15T08:58:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-constraint-validation\/email-validation.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Intro Into HTML5 Constraint Validation","datePublished":"2016-09-19T15:01:43+00:00","dateModified":"2022-07-15T08:58:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/"},"wordCount":1539,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-constraint-validation\/email-validation.jpg","keywords":["Forms","HTML"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/","name":"Intro Into HTML5 Constraint Validation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-constraint-validation\/email-validation.jpg","datePublished":"2016-09-19T15:01:43+00:00","dateModified":"2022-07-15T08:58:42+00:00","description":"Interactive websites and applications can't be imagined without forms that enable us to connect with our users, and to obtain the data we need in order to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-constraint-validation\/email-validation.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-constraint-validation\/email-validation.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-constraint-validation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Intro Into HTML5 Constraint Validation"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7i7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28031"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28031\/revisions"}],"predecessor-version":[{"id":60444,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28031\/revisions\/60444"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28031"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}