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


  1. Lauren Rodriguez says:

    I have read your blog on How can I validate my HTML code. It was very interesting and helpful but I can add some extra points in your article. Here some extra points:
    1.Open the sample invalid web page.
    2.View the web page’s source code.
    3.Save the sample invalid web page on to your local drive.
    4.Now try testing this file using the W3C HTML Validator. These are some extra points to add to your article.

  2. Roel says:

    Here’s a sevent reason: you might accidentially have already assigned a value to the value attribute of the input tag. This just happened to me… I was under the impression I was utilizing the placeholder attribute, but in fact I was utilizing the value attribute…. hence, the form processing mechanism simply thought I had already filled something out in the respective input field.

  3. Rinkal says:

    I have checked all of above , In my case it is running in some chrome browser and not running into some chrome browser. I am not able to find cause

  4. sadad says:

    Jquery – HTML Tag are not allowed in textarea


    $(“.box”).focusout( function(e) {
    var reg =//g;
    if (reg.test($(‘.box’).val()) == true) {
    alert(‘HTML Tag are not allowed’);


Leave a Reply

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