{"id":22815,"date":"2024-04-12T09:54:13","date_gmt":"2024-04-12T08:54:13","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/validaciones-del-atributo-pattern-en-html\/"},"modified":"2024-06-03T17:29:16","modified_gmt":"2024-06-03T16:29:16","slug":"validaciones-del-atributo-pattern-en-html","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/","title":{"rendered":"Validations of the pattern attribute in HTML"},"content":{"rendered":"<p>In web development, the attribute <strong>patterns<\/strong> in HTML is a very useful tool to validate the data entered by users in a text field. This attribute allows you to establish a regular expression that defines the correct format that the data must have before being sent to the server.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#HTML_pattern_%C2%BFQue_es_y_como_funciona\" >HTML pattern: What is it and how does it work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#Patterns_HTML_ejemplos_y_utilidades\" >HTML Patterns: examples and utilities<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#Validaciones_pattern_en_espanol\" >Pattern validations in Spanish<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#1_%C2%BFEs_necesario_utilizar_el_atributo_pattern_en_HTML\" >1. Is it necessary to use the pattern attribute in HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#2_%C2%BFPuedo_utilizar_el_atributo_pattern_en_cualquier_elemento_HTML\" >2. Can I use the pattern attribute on any HTML element?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/pattern-attribute-validations-in-html\/#3_%C2%BFSe_pueden_combinar_varios_atributos_pattern_en_un_mismo_campo\" >3. Can several pattern attributes be combined in the same field?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"HTML_pattern_%C2%BFQue_es_y_como_funciona\"><\/span>HTML pattern: What is it and how does it work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>He <strong>HTML pattern<\/strong> is an attribute that is used in conjunction with the element <code><input><\/code> to specify a validation pattern. This pattern, defined by a regular expression, ensures that the data entered meets certain conditions.<\/p>\n<p>For example, if we want to validate a text field so that only numbers are allowed, we can use the following code:<\/p>\n<pre>\n<input type=\"text\" title=\"Only numbers allowed\">\n<\/pre>\n<p>In this case, the regular expression <code>[0-9]+<\/code> indicates that one or more digits from 0 to 9 are allowed. If the user attempts to enter any other type of character, an error message defined by the attribute will be displayed. <code>title<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Patterns_HTML_ejemplos_y_utilidades\"><\/span>HTML Patterns: examples and utilities<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>HTML patterns<\/strong> They are predefined patterns that we can use to validate different common data types. Some popular examples are:<\/p>\n<ul>\n<li><strong>E-mail:<\/strong> <code><input type=\"email\"><\/code><\/li>\n<li><strong>Phone:<\/strong> <code><input type=\"tel\"><\/code><\/li>\n<li><strong>URL:<\/strong> <code><input type=\"url\"><\/code><\/li>\n<li><strong>Date:<\/strong> <code><input type=\"date\"><\/code><\/li>\n<\/ul>\n<p>These are just a few examples, but the possibilities are almost endless. The pattern attribute in HTML gives us great flexibility to customize our validations and adapt them to the needs of our project.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Validaciones_pattern_en_espanol\"><\/span>Pattern validations in Spanish<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you are developing an application in Spanish, you can also use the pattern attribute in HTML with error messages in that language. You just have to make sure to include the error messages in Spanish in the attribute <code>title<\/code> of each text field.<\/p>\n<p>For example, if we want to validate a field so that it only accepts valid names in Spanish, we can use the following code:<\/p>\n<pre>\n<input type=\"text\" title=\"Please enter a valid name in Spanish\">\n<\/pre>\n<p>In this case, the regular expression <code>[A-Za-z\u00e1\u00e9\u00ed\u00f3\u00fa\u00c1\u00c9\u00cd\u00d3\u00da\u00f1\u00d1s]{2,30}<\/code> allows any uppercase or lowercase letter in Spanish, including accented characters and the letter \u00f1. In addition, a minimum of 2 characters and a maximum of 30 are allowed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_%C2%BFEs_necesario_utilizar_el_atributo_pattern_en_HTML\"><\/span>1. Is it necessary to use the pattern attribute in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It is not strictly necessary to use the pattern attribute in HTML, but its use provides a simple and efficient way to validate data on the client side, before being sent to the server. This helps improve the user experience and reduces the number of errors that can occur when submitting forms.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_%C2%BFPuedo_utilizar_el_atributo_pattern_en_cualquier_elemento_HTML\"><\/span>2. Can I use the pattern attribute on any HTML element?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, the pattern attribute can only be used on elements <code><input><\/code> that support text input, such as <code><input type=\"text\"><\/code>, <code><input type=\"password\"><\/code>, etc. It cannot be used on other elements, such as <code><textarea><\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_%C2%BFSe_pueden_combinar_varios_atributos_pattern_en_un_mismo_campo\"><\/span>3. Can several pattern attributes be combined in the same field?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, you can only use a single pattern attribute in each text field. However, you can use more complex regular expressions that cover different validations.<\/p>\n<p>In conclusion, the pattern attribute in HTML is a powerful tool that allows us to validate data entered by users in a simple and efficient way. Its proper use helps us improve the quality of web applications and provides a better experience to users.<\/p>\n<p>Fountain: <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In web development, the pattern attribute in HTML is a very useful tool for validating data entered by users in a text field. This attribute allows you to establish a regular expression that defines the correct format that the data must have before being sent to the server. HTML pattern: What is it and how to use it?<\/p>","protected":false},"author":1,"featured_media":22816,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[696,205,172,475,730,731],"class_list":["post-22815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-atributo","tag-blog","tag-del","tag-html","tag-pattern","tag-validaciones"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22815"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22816"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}