Validations in HTML5 Forms

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.

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.

Read: Introduction to HTML5 Forms

HTML5 Input Types and Attributes

Below is a list of some of the new input types and associated attributes featured in HTML5:

• number
• email
• search
• tel
• url
• range
• color
• date
• month
• week
• time

New attributes introduced in HTML5 include:

• required
• autofocus
• autocomplete
• placeholder
• minlength
• readonly
• pattern
• list

HTML5 Form Validation Example

Knowing the new HTML5 input types and attributes is necessary to validate forms. We cover this process in our next section.

The ‘required’ attribute in HTML5

By simply adding the required attribute to any , </strong>, or <strong><select></strong> element, you tell the browser that some value is required in this field:</p><pre><code class="language-plaintext"><form>            <span>Name</span> <input type="text" name="name" required> </form></code></pre><p><img src="https://cdn.htmlgoodies.com/d641280817dd1992ee36af2bc986235adcaf32e5d5b2eef45b42edcbcccb1144.png" alt="How to validate input in HTML5 Forms" width="377" height="129" /></p><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><p>You can also use the <strong>required </strong>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><p><strong>Read: </strong><a href="https://www.htmlgoodies.com/html/build-web-forms-html/" rel="noopener noreferrer" target="_blank">How to Build a Web Form with HTML</a></p><h3>Limit Number Values on HTML5 Forms</h3><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’s 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><p>If you are using a text field or <strong>textarea</strong>, then you need to use the <strong>maxlength</strong> attribute instead:</p><pre><code class="language-plaintext"><form>             <span>Age</span> <input type="number" name="age" min="18" max="90" required> </form></code></pre><h3><img src="https://cdn.htmlgoodies.com/772ff49ad7d920cbd6e80cc63db067cf3778eaf6c78a07f54da6e00f89c92b54.png" alt="Input Validtion HTML5" width="172" height="91" /></h3><h3>The patterns Attribute in HTML5</h3><p>The <strong>patterns</strong> attribute allows web developers to use <em>regular expressions</em>. When this attribute is applied, it tells the browser to compare the value of <em>regex</em> 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><p>The following code snippet shows how to use regular expressions in HTML5 forms:</p><pre><code class="language-plaintext"><input type="password" required pattern="^(?=.*\d)[0-9a-zA-Z]{6,}$" title="Password should be a minimum of 6 character long and must contain at least one number"></code></pre><p><img src="https://cdn.htmlgoodies.com/f675ff387008c5112964b01f12de642aaa48a30131fc9018dcae464b0ba76a15.png" alt="HTML5 Input Limits" width="638" height="161" /></p><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 <strong>pattern</strong> attribute uses regular expressions to filter data.</p><h2>Styling with CSS in HTML5</h2><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><ul class="list-bullet"><li class="" style="" value="1" ><strong>:valid</strong></li><li class="" style="" value="2" ><strong>:invalid</strong></li><li class="" style="" value="3" ><strong>:required</strong></li><li class="" style="" value="4" ><strong>:optional</strong></li><li class="" style="" value="5" ><strong>:in-range</strong></li><li class="" style="" value="6" ><strong>:out-of-range</strong></li><li class="" style="" value="7" ><strong>:read-only</strong></li><li class="" style="" value="8" ><strong>:read-write</strong></li></ul><p>To understand how these CSS pseudo-classes work, consider the following code example:</p><pre><code class="language-plaintext"><form>            <span>Age</span> <input type="number" name="age" min="18" required> </form></code></pre><p>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 “<strong>Age</strong>” field, if you enter any value less than <strong>18</strong>, the border color changes to red, marking it as an incorrect field.</p><pre><code class="language-plaintext"><style type="text/css"> input:focus:invalid        {            border:1px solid #F5192F;            box-shadow:0 0 4px #F5192F;        } </style></code></pre><p><img src="https://cdn.htmlgoodies.com/e85f10c8a1dbaa35ded0ea318bdf17a3f246decf3d469acd470f74cc185c2b3f.png" alt="HTML5 Form Validation" width="117" height="86" /></p><p>For input that is valid, you can use the following styles:</p><pre><code class="language-plaintext"><style type="text/css">        input:focus:valid,        {            border: 1px solid #64C364;            box-shadow: 0 0 4px #64C364;        } </style></code></pre><h2><img src="https://cdn.htmlgoodies.com/fd4fe6779d910033095544679cc290aebfd0274efac25d447678110286444dbb.png" alt="Validate HTML5 Forms" width="127" height="86" /></h2><p><strong>Read:</strong> <a href="https://www.htmlgoodies.com/css/style-radio-buttons-checkboxes-css/" rel="noopener noreferrer" target="_blank">Styling Radio Buttons and Checkboxes in HTML Forms</a></p><h2>Other HTML5 Input Types</h2><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><ul class="list-bullet"><li class="" style="" value="1" ><strong>url</strong></li><li class="" style="" value="2" ><strong>color</strong></li><li class="" style="" value="3" ><strong>date</strong></li><li class="" style="" value="4" ><strong>search</strong></li><li class="" style="" value="5" ><strong>tel</strong></li><li class="" style="" value="6" ><strong>time</strong></li></ul><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><pre><code class="language-plaintext"><input type="url" placeholder="Enter your Website" required></code></pre><p>Note that some of the input fields, such as “<strong>tel</strong>” and “<strong>email</strong>” 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 <strong>QWERTY</strong> 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><p>We hope this post helped you to get up to speed with validating HTML5 forms. Thanks for reading!</p></div>