Master Form Validation with the Pattern Attribute in HTML

Validating data entry in web forms is crucial to maintaining data integrity. One of the most efficient and least known methods to carry out this validation is by using the attribute patterns in HTML. This attribute allows you to define a regular expression that the form's input field must meet to be considered valid. In this article, we will explore how you can use the attribute patterns to ensure that users enter information in the desired format.

What is the Pattern Attribute?

The attribute patterns is available in HTML5 and can be used in form elements like y </code>. Specifies a regular expression that defines a pattern which the input value must match to be considered valid. If the value entered does not match the pattern, the form will not be submitted and the user will be alerted to correct their entry.</p> <h2><span class="ez-toc-section" id="Expresiones_Regulares_La_Clave_para_Pattern"></span>Regular Expressions: The Key to Pattern<span class="ez-toc-section-end"></span></h2> <p>Before delving into how to use <code>patterns</code>, it is important to understand regular expressions. They are sequences of characters that form a search pattern, and are used to check if a string contains this pattern. They come with their own syntax and can be simple (such as checking if an entry contains only digits) or complex (such as validating email addresses).</p> <h2><span class="ez-toc-section" id="Como_Usar_el_Atributo_Pattern"></span>How to Use the Pattern Attribute<span class="ez-toc-section-end"></span></h2> <p>Here are some practical examples for different types of data you might want to validate in a form:</p> <h3><span class="ez-toc-section" id="Validacion_de_Numeros_de_Telefono"></span>Phone Number Validation<span class="ez-toc-section-end"></span></h3> <pre><code class=""language-html""><form><label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" title="A valid phone number consists of 10 digits and is formatted as 123-456-7890"><input type="submit"></form></code></pre> <p>In this example, the regular expression <code>[0-9]{3}-[0-9]{3}-[0-9]{4}</code> validates that the user enters a phone number in the format 123-456-7890.</p> <h3><span class="ez-toc-section" id="Validacion_de_Direcciones_de_Correo_Electronico"></span>Email Address Validation<span class="ez-toc-section-end"></span></h3> <pre><code class=""language-html""><form><label for="email">Enter your email address:</label> <input type="email" id="email" name="email" title="Please enter a valid email address."><input type="submit"></form></code></pre> <p>Although the type of input <code>e-mail</code> performs its own validation, use the attribute <code>patterns</code> allows you to specify which email format you accept.</p> <h3><span class="ez-toc-section" id="Validacion_de_Contrasenas"></span>Password Validation<span class="ez-toc-section-end"></span></h3> <pre><code class=""language-html""><form><label for="password">Create your password:</label> <input type="password" id="password" name="password" title="The password must have at least one uppercase letter, one lowercase letter, and one number, and at least 8 characters in length."><input type="submit"></form></code></pre> <p>The boss <code>(?=.*d)(?=.*[az])(?=.*[AZ]).{8,}</code> Ensures that the password is a minimum of eight characters and includes at least one uppercase letter, one lowercase letter, and one number.</p> <h2><span class="ez-toc-section" id="Consejos_Utiles_al_Usar_el_Atributo_Pattern"></span>Helpful Tips When Using the Pattern Attribute<span class="ez-toc-section-end"></span></h2> <ol> <li> <p><strong>Test your regular expressions</strong>: Before implementing them, make sure they work as you expect. There are online tools that allow you to try them out.</p> </li> <li> <p><strong>Be clear on error messages</strong>: Use the attribute <code>title</code> to provide an error message that guides users on how to correct their entry. This improves user experience and accessibility.</p> </li> <li> <p><strong>Don't just rely on client-side validation</strong>: Although <code>patterns</code> It is a powerful tool, you should always validate the data on the server as well as an additional security measure.</p> </li> <li> <p><strong>Keep usability in mind</strong>: Patterns should be flexible enough to accept valid data in slightly different formats.</p> </li> </ol> <h2><span class="ez-toc-section" id="Ejemplos_Avanzados_y_Casos_Practicos"></span>Advanced Examples and Practical Cases<span class="ez-toc-section-end"></span></h2> <p>We can take validation a step further, as the following examples suggest:</p> <h3><span class="ez-toc-section" id="Prohibir_Caracteres_Especificos"></span>Ban Specific Characters<span class="ez-toc-section-end"></span></h3> <pre><code class=""language-html""><form><label for="username">Choose a username:</label> <input type="text" id="username" name="username" pattern="^[^]+$" title="The username cannot contain the characters < or >."><input type="submit"></form></code></pre> <h3><span class="ez-toc-section" id="Valida_un_Rango_de_Fechas"></span>Validate a Date Range<span class="ez-toc-section-end"></span></h3> <pre><code class=""language-html""><form><label for="date">Select a date:</label> <input type="text" id="date" name="date" title="The date must be in the format YYYY-MM-DD and be after the year 2000." placeholder="YYYY-MM-DD" min="2001-01-01"><input type="submit"></form></code></pre> <h2><span class="ez-toc-section" id="Conclusion"></span>Conclusion<span class="ez-toc-section-end"></span></h2> <p>The attribute <code>patterns</code> is a powerful and versatile tool for validating input data in HTML forms. It allows you to ensure that the data entered meets specific requirements before being processed by the server, thus improving data quality and user experience.</p> <p>For more information and tips on web development, you can visit my personal blog at <a href="https://nelkodev.com/en/">NelkoDev</a>. And if you have questions or need help with your web project, don't hesitate to contact me via <a href="https://nelkodev.com/en/contact/">NelkoDev Contact</a>.</p> </div> </div> <div class="elementor-element elementor-element-35c3803e elementor-share-buttons--skin-flat elementor-share-buttons--shape-rounded elementor-grid-4 elementor-grid-mobile-2 elementor-share-buttons--color-custom elementor-share-buttons--view-icon-text elementor-widget elementor-widget-share-buttons" data-id="35c3803e" data-element_type="widget" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook" role="button" tabindex="0" aria-label="Share on facebook" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fab fa-facebook" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Facebook </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" role="button" tabindex="0" aria-label="Share on twitter" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fab fa-twitter" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Twitter </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_email" role="button" tabindex="0" aria-label="Share on email" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fas fa-envelope" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Email </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_print" role="button" tabindex="0" aria-label="Share on print" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fas fa-print" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Print </span> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-3d9b9fee elementor-author-box--avatar-yes elementor-author-box--name-yes elementor-author-box--biography-yes elementor-author-box--link-no elementor-widget elementor-widget-author-box" data-id="3d9b9fee" data-element_type="widget" data-widget_type="author-box.default"> <div class="elementor-widget-container"> <div class="elementor-author-box"> <div class="elementor-author-box__avatar"> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Picture of NelkoDev" loading="lazy" data-src="https://secure.gravatar.com/avatar/4f004709043429b920c90afc7c3c4106?s=300&d=mm&r=g" decoding="async" class="lazyload" data-no-translation-alt=""><noscript><img src="https://secure.gravatar.com/avatar/4f004709043429b920c90afc7c3c4106?s=300&d=mm&r=g" alt="Picture of NelkoDev" loading="lazy" data-eio="l" data-no-translation-alt=""></noscript> </div> <div class="elementor-author-box__text"> <div > <div class="elementor-author-box__name"> NelkoDev </div> </div> <div class="elementor-author-box__bio"> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-b7ef0a1 elementor-widget elementor-widget-post-comments" data-id="b7ef0a1" data-element_type="widget" data-widget_type="post-comments.theme_comments"> <div class="elementor-widget-container"> <section id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/en/blog/master-form-validation-with-the-pattern-attribute-in-html/#respond" style="display:none;" data-no-translation="" data-trp-gettext="">Cancel reply</a></small></h2><form action="/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate data-trp-original-action="https://nelkodev.com/wp-comments-post.php"><p class="comment-notes"><span id="email-notes" data-no-translation="" data-trp-gettext="">Your email address will not be published.</span> <span class="required-field-message" data-no-translation="" data-trp-gettext="">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Name *