{"id":392,"date":"2026-02-04T07:08:08","date_gmt":"2026-02-04T07:08:08","guid":{"rendered":"https:\/\/testserver.eminenture.co.in\/test\/MultitectIT\/blog\/?p=392"},"modified":"2026-02-04T07:09:33","modified_gmt":"2026-02-04T07:09:33","slug":"how-to-use-pattern-attribute-in-html5-form-validation","status":"publish","type":"post","link":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/","title":{"rendered":"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?"},"content":{"rendered":"\n<p>Have you seen the enquiry form on a website? It starts users\u2019 conversation with a website. Users ask for anything resonating with his intent on the website.\u00a0 But it is where that user\u2019s inquiry will be stuck if its inquiry form is not working properly. This is a consequence of poor validation. Result?\u00a0<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Incorrect data, frustrated users, and extra backend processing are some common consequences of this bad user experience. This problem can be solved by leveraging HTML5, as it has several native validation features to overcome this problem. And the most powerful among them is the pattern attribute.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Form Validation?<\/strong><\/h2>\n\n\n\n<p>\u2018Validation\u2019 determines the action of checking accuracy. Or you can say, it\u2019s all about proving validity.&nbsp; Form is an ideal source of communication virtually with the user. Let\u2019s say, you want to create a gmail account. How can you do it? Obviously, you need to fill the form. By providing credentials in the form, your account would be ready to use.<\/p>\n\n\n\n<p><strong>\u2018Form validation\u2019<\/strong> identifies if the input value is in correct or incorrect format.&nbsp; Have you noticed an error message that pops up onsubmit or onkeypress or onblur?&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"407\" src=\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/image.png\" alt=\"\" class=\"wp-image-1016\" srcset=\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/image.png 726w, https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/image-300x168.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Onsubmit:<\/strong> It identifies the validity evaluation when the user submits the form.\u00a0\u00a0<\/li>\n\n\n\n<li><strong>Onkeypress: <\/strong>It evaluates the accuracy of input while typing or entering any value into a field.\u00a0<\/li>\n\n\n\n<li><strong>Onblur: <\/strong>It verifies the input in the form when the user checks the form.<\/li>\n<\/ul>\n\n\n\n<p>Any of these validations returns the message in the pop-up that the input in the pointed field requires correction. Mostly, it figures out correction in the format. For example, the input field of the username mandates entering <strong>\u2018alphabets\u2019 <\/strong>&amp; <strong>\u2018uppercase\u2019<\/strong> or<strong> \u2018lowercase\u2019<\/strong>.&nbsp;<\/p>\n\n\n\n<p>When this given validation criterion does not match, conflict arises. Consequently, the error message pops up while interrupting submission.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Let\u2019s move on\u2026.<\/strong><\/p>\n\n\n\n<p>This blog contains helpful tips regarding web designing of form validation in HTML5. It basically highlights the \u2018pattern\u2019 attribute. Go through these \u2018how-to-use\u2019 tips, practical examples, best practices, and limitations for delivering a flawless user experience.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern<\/mark> Attribute?<\/strong><\/h2>\n\n\n\n<p>The pattern attribute is a very common feature of HTML 5 that uses &lt;input&gt; elements for a regular expression (regex). The value must match these elements before a user submits the form.&nbsp;<\/p>\n\n\n\n<p>A slight mismatch with the defined pattern leads to these results automatically:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Form submission stops.<\/li>\n\n\n\n<li>A validation error message pops up.<\/li>\n\n\n\n<li>The invalid field highlights.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>These are client-side errors, which help in improving user experience and reducing invalid data in your server.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Basic Syntax of <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern<\/mark><\/strong><\/h2>\n\n\n\n<p>&lt;input type=&#8221;text&#8221; pattern=&#8221;regex&#8221; title=&#8221;Error message&#8221;&gt;<\/p>\n\n\n\n<p>This syntax is for designers who use it to put values against:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>pattern<\/strong>:<\/mark> That carries the regular expression<\/li>\n\n\n\n<li><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>title<\/strong>:<\/mark> It displays a comprehensive message when entered data is invalid.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>These elements work best when they are combined with required, which mandates the entry as per the field\u2019s requirement in the form. The browser thereafter checks the input value put against the regex at the time of form submission.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Input Types That Support <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern<\/mark><\/strong><\/h2>\n\n\n\n<p>The pattern attribute shows expected results when it consists of the following input types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>text<\/li>\n\n\n\n<li>search<\/li>\n\n\n\n<li>tel<\/li>\n\n\n\n<li>url<\/li>\n\n\n\n<li>email<\/li>\n\n\n\n<li>password<\/li>\n<\/ul>\n\n\n\n<p>With <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">type=&#8221;number&#8221;<\/mark>, it does not show expected results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Simple and Practical Examples<\/strong><\/h2>\n\n\n\n<p>Let\u2019s explain it witht some practical cases.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Validating Names (Letters Only): It necessitates entering valid names by following these codes:<\/strong><\/h4>\n\n\n\n<p>&lt;input<\/p>\n\n\n\n<p>&nbsp;&nbsp;type=&#8221;text&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;name=&#8221;fullname&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;pattern=&#8221;[A-Za-z ]+&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;title=&#8221;Only letters and spaces are allowed&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;required&gt;<\/p>\n\n\n\n<p>The validation rule will check whether the name has only letters and spaces. If it consists of special elements (like #, $, @, etc.) or numbers, the entry will be denied, showing as INVALID.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Checking a 10-Digit Phone Number: It allows entering only numbers, but no text.&nbsp;<\/strong><\/h4>\n\n\n\n<p>&lt;input<\/p>\n\n\n\n<p>&nbsp;&nbsp;type=&#8221;tel&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;pattern=&#8221;[0-9]{10}&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;title=&#8221;Enter a valid 10-digit mobile number&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;required&gt;<\/p>\n\n\n\n<p>As the code runs, it validates the fed data. If the user enters exactly 10 digits with no spaces or symbols, it passes the query as valid.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Password Validation (Alphanumeric): It takes the combination of alphabet and numbers.\u00a0<\/strong><\/h4>\n\n\n\n<p>&lt;input<\/p>\n\n\n\n<p>&nbsp;&nbsp;type=&#8221;password&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;pattern=&#8221;[A-Za-z0-9]{8,16}&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;title=&#8221;Password must be 8\u201316 characters long and contain only letters and numbers&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;required&gt;<\/p>\n\n\n\n<p>This example proves password validation, which limits passwords\u2019s length to 16 characters, including letters and numbers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Using Anchors for Clarity<\/strong><\/h2>\n\n\n\n<p>However, browsers are smart enough to automatically match the entire input value. But anchors make regex more understandable and intentional.<\/p>\n\n\n\n<p><strong>Here is an example of the code:<\/strong><\/p>\n\n\n\n<p>&lt;input<\/p>\n\n\n\n<p>&nbsp;&nbsp;type=&#8221;text&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;pattern=&#8221;^[0-9]{6}$&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;title=&#8221;Enter a 6-digit PIN code&#8221;&gt;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>^<\/strong><\/mark> \u2192 It marks the start of the input.\u00a0<\/li>\n\n\n\n<li><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>$<\/strong><\/mark> \u2192 The input ends with this sign.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>This is how even partial matches are prevented.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Common Real-World Use Cases<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table  class=\"has-fixed-layout table table-hover\" ><tbody><tr><td><strong>Field Type<\/strong><\/td><td><strong>Regex Pattern<\/strong><\/td><\/tr><tr><td>Australian PIN Code<\/td><td>\/^[0-9]{4}$\/<\/td><\/tr><tr><td>Username<\/td><td>[a-zA-Z0-9_]{5,15}<\/td><\/tr><tr><td>Hex Color Code<\/td><td>#?[A-Fa-f0-9]{6}<\/td><\/tr><tr><td>Employee ID<\/td><td>[A-Z]{3}[0-9]{4}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>These patterns automatically validate entries and standardise data at the point of entry.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Combining <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern <\/mark>with Other Attributes<\/strong><\/h2>\n\n\n\n<p>If you want stronger validation specifications, combine pattern with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>required<\/li>\n\n\n\n<li>minlength<\/li>\n\n\n\n<li>maxlength<\/li>\n\n\n\n<li>placeholder<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>&lt;input<\/p>\n\n\n\n<p>&nbsp;&nbsp;type=&#8221;text&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;pattern=&#8221;[A-Z]{3}[0-9]{4}&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;minlength=&#8221;7&#8243;<\/p>\n\n\n\n<p>&nbsp;&nbsp;maxlength=&#8221;7&#8243;<\/p>\n\n\n\n<p>&nbsp;&nbsp;placeholder=&#8221;ABC1234&#8243;<\/p>\n\n\n\n<p>&nbsp;&nbsp;title=&#8221;Format must be ABC1234&#8243;<\/p>\n\n\n\n<p>&nbsp;&nbsp;required&gt;<\/p>\n\n\n\n<p>This pattern brings consistency and also feeds usable data into the database.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Custom Error Messaging with <\/strong><strong>title<\/strong><\/h2>\n\n\n\n<p><strong>HTML5<\/strong> is considered the <a href=\"https:\/\/www.topnotchdezigns.com\/reasons-why-html5-is-the-future-even-now\/\"><strong>best web design tool<\/strong> <\/a>because it automatically pops the title value when the entry fails to meet a valid value. So, you don\u2019t need to write extra codes in JavaScript to notify customers. It automatically does it.\u00a0<\/p>\n\n\n\n<p>&lt;input<\/p>\n\n\n\n<p>&nbsp;&nbsp;type=&#8221;text&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;pattern=&#8221;[0-9]{4}&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;title=&#8221;Please enter exactly 4 digits&#8221;&gt;<\/p>\n\n\n\n<p>Tip: Always write error messages in a layman\u2019s language, but not in a regex explainer.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Limitations of the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern <\/mark>Attribute<\/strong><\/h2>\n\n\n\n<p>The <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern <\/mark>has some constraints also, which are shared below:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It cannot manage or handle complex logic or conditions.\u00a0<\/li>\n\n\n\n<li>Ranges and calculations cannot be verified in it.\u00a0<\/li>\n\n\n\n<li>It fails to replace server-side validation.\u00a0<\/li>\n\n\n\n<li>Errors styling is limited across browsers<\/li>\n<\/ul>\n\n\n\n<p>Here, the concern is easy bypassing of client-side validation. It can be easy to bypass with the pattern attribute. But server-side validation is necessary if you want tighter security and data integrity.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices for Using <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern<\/mark><\/strong><\/h2>\n\n\n\n<p><strong>All in all, the <a href=\"https:\/\/www.multitechit.com.au\/web-design-development-services-gold-coast.php\">designer or developer<\/a> should:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a pattern to validate the format but not business rules.<\/li>\n\n\n\n<li>Keep regex simple and understandable.\u00a0<\/li>\n\n\n\n<li>Always integrate an actionable, helpful title message.<\/li>\n\n\n\n<li>The pattern must be combined with backend validation.\u00a0<\/li>\n\n\n\n<li>To check its consistent behaviour, test it across browsers.\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When Should You Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern<\/mark>?<\/strong><\/h2>\n\n\n\n<p>The pattern attribute is majorly recommended in these cases:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When you want to reduce invalid form entries.<\/li>\n\n\n\n<li>When you want only accurate data to enter.\u00a0<\/li>\n\n\n\n<li>When you want to deliver a seamless user experience.\u00a0<\/li>\n\n\n\n<li>When you don\u2019t want to majorly rely on JavaScript for simple validations.<\/li>\n<\/ul>\n\n\n\n<p>Certainly, the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">pattern <\/mark>attribute provides a minimalistic, clean, and efficient validation layer for login forms, sign-up pages, contact forms, and CRM data entry.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>The HTML5 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\">pattern <\/mark>attribute is an efficient, simple, and effective way to integrate input rules for validation at the browser level. When it is flawlessly implemented, the collected data from that form becomes more usable with the least anomalies and errors.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you seen the enquiry form on a website? It starts users\u2019 conversation with a website. Users ask for anything resonating with his intent on the website.\u00a0 But it is where that user\u2019s inquiry will be stuck if its inquiry form is not working properly. This is a consequence of poor validation. Result?\u00a0<\/p>\n","protected":false},"author":1,"featured_media":1010,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-and-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?<\/title>\n<meta name=\"description\" content=\"Need custom input validation in HTML5? Learn how to use the &#039;pattern&#039; attribute to enforce specific data formats in your forms.\" \/>\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.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?\" \/>\n<meta property=\"og:description\" content=\"Need custom input validation in HTML5? Learn how to use the &#039;pattern&#039; attribute to enforce specific data formats in your forms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\" \/>\n<meta property=\"og:site_name\" content=\"Multitech Blog - Tech &amp; Business Insights\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-04T07:08:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-04T07:09:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/fa92596dcf02b0bb5e638a382206c4c1\"},\"headline\":\"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?\",\"datePublished\":\"2026-02-04T07:08:08+00:00\",\"dateModified\":\"2026-02-04T07:09:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\"},\"wordCount\":1270,\"image\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png\",\"articleSection\":[\"Web Design And Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\",\"url\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\",\"name\":\"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?\",\"isPartOf\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png\",\"datePublished\":\"2026-02-04T07:08:08+00:00\",\"dateModified\":\"2026-02-04T07:09:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/fa92596dcf02b0bb5e638a382206c4c1\"},\"description\":\"Need custom input validation in HTML5? Learn how to use the 'pattern' attribute to enforce specific data formats in your forms.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage\",\"url\":\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png\",\"contentUrl\":\"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.multitechit.com.au\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/#website\",\"url\":\"https:\/\/www.multitechit.com.au\/blog\/\",\"name\":\"Multitech Blog - Tech &amp; Business Insights\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.multitechit.com.au\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/fa92596dcf02b0bb5e638a382206c4c1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9ceba3808ea84d6683a9516c8dc1ee5bcdd2dc14a6768e96c7de704a40c5eb1e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9ceba3808ea84d6683a9516c8dc1ee5bcdd2dc14a6768e96c7de704a40c5eb1e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"description\":\"Explore expert articles and resources designed to help businesses leverage technology for success and innovation.\",\"url\":\"https:\/\/www.multitechit.com.au\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?","description":"Need custom input validation in HTML5? Learn how to use the 'pattern' attribute to enforce specific data formats in your forms.","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.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/","og_locale":"en_US","og_type":"article","og_title":"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?","og_description":"Need custom input validation in HTML5? Learn how to use the 'pattern' attribute to enforce specific data formats in your forms.","og_url":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/","og_site_name":"Multitech Blog - Tech &amp; Business Insights","article_published_time":"2026-02-04T07:08:08+00:00","article_modified_time":"2026-02-04T07:09:33+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#article","isPartOf":{"@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/"},"author":{"name":"admin","@id":"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/fa92596dcf02b0bb5e638a382206c4c1"},"headline":"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?","datePublished":"2026-02-04T07:08:08+00:00","dateModified":"2026-02-04T07:09:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/"},"wordCount":1270,"image":{"@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png","articleSection":["Web Design And Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/","url":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/","name":"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?","isPartOf":{"@id":"https:\/\/www.multitechit.com.au\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage"},"image":{"@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png","datePublished":"2026-02-04T07:08:08+00:00","dateModified":"2026-02-04T07:09:33+00:00","author":{"@id":"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/fa92596dcf02b0bb5e638a382206c4c1"},"description":"Need custom input validation in HTML5? Learn how to use the 'pattern' attribute to enforce specific data formats in your forms.","breadcrumb":{"@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#primaryimage","url":"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png","contentUrl":"https:\/\/www.multitechit.com.au\/blog\/wp-content\/uploads\/2017\/07\/Black-White-And-Purple-Modern-Technology-That-Unifies-The-World-Presentation.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.multitechit.com.au\/blog\/how-to-use-pattern-attribute-in-html5-form-validation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.multitechit.com.au\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use \u2018Pattern\u2019 Attribute in HTML5 Form Validation?"}]},{"@type":"WebSite","@id":"https:\/\/www.multitechit.com.au\/blog\/#website","url":"https:\/\/www.multitechit.com.au\/blog\/","name":"Multitech Blog - Tech &amp; Business Insights","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.multitechit.com.au\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/fa92596dcf02b0bb5e638a382206c4c1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.multitechit.com.au\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9ceba3808ea84d6683a9516c8dc1ee5bcdd2dc14a6768e96c7de704a40c5eb1e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ceba3808ea84d6683a9516c8dc1ee5bcdd2dc14a6768e96c7de704a40c5eb1e?s=96&d=mm&r=g","caption":"admin"},"description":"Explore expert articles and resources designed to help businesses leverage technology for success and innovation.","url":"https:\/\/www.multitechit.com.au\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/posts\/392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":13,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions\/1031"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/media\/1010"}],"wp:attachment":[{"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.multitechit.com.au\/blog\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}