6 Reasons – HTML5 Required Attribute Validation not Working

HTML5 is rich with plenty of features. The support of the required attribute and built-in browser validation is one such feature. With the HTML5 required attribute, you can perform form input validation without the complicated JavaScript code.

However, the validation with the required attribute doesn’t work sometimes due to the lake of proper markup. It’s necessary to produce proper HTML5 form and input tags. Today, we’re mentioning 6 reasons that might cause the built-in validation to not work.

HTML5 Required Attribute Validation not Working

Browsers Support for HTML5 Required Attribute

Not every browser version supports this attribute. So it would be better to first know if the validation using the required attribute is support by a browser using the given table.

BrowserChromeFirefoxOperaSafariInternet Explorer

Importantly, know that the validation by the browser or client-side JS can be spoofed. Despite what is there at the client-side, you must apply the input validation at the server-side. This is a must for the security of your application.

Finally, let us check the 6 reasons that can make the built-in required attribute validation to not work in an HTML5 browser.

1. The Form Tag has “novalidate” Attribute

This is the first and the most common reason that causes the issue. HTML5 required attribute validation doesn’t work if the form has the novalidate attribute in its markup. With the presence of the attribute, the tag looks like <form action="#" novalidate>.

So you need to ensure that this attribute isn’t present in the form tag markup. Additionally, if you’re using WordPress and see the attribute there then follow the section below to remove the same

Remove novalidate in WordPress

Here are two best ways to remove the novalidate attribute from the form tag in WordPress. The first one is the most preferred solution.

(i) Add the code given below in your current theme’s functions.php file.

(ii) Alternatively, you can add the following JavaScript code in the footer.php file of the WordPress theme.

In the code above, we’re removing the attribute from the default WP comment form.

Also Read:

2. Required Attribute Validation doesn’t Work with Unclosed Input Tags

If the field misses the closing tag at the end then most probably the validation won’t work. So always close the tags in either way.

3. The Button is Missing the Type 

The form’s submit button should have the type="submit" attribute despite it is either an input tag or a button tag.

4. Input Elements aren’t Inside Form Tag

If the input elements aren’t inside a form tag then HTML5 required attribute will fail to work. So always put input tags inside a form along with the form encapsulation itself.

We have a number of articles regarding form enhancement and validation. You would like to read:

5. Absent Meta Tag might Cause Validation not Working

If none of the above works, check if the meta charset="UTF-8"  is present in the head section of the page. If not, then declare the same in the head section.

6. Action/Method Missing for HTML 5 Required Attribute Validation

It’s quite awkward but lacking the action and/or method attributes in the form tag might cause the validation to not fire.

So we have listed the 6 reasons that lead to a non-working HTML5 required attribute validation. We hope either one of them must solve the trouble. We are curious if you ever had the trouble and how did you fix the required field validation by the browser. Please comment on the form given.

You Might Interested In

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.