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.
- Browsers Support for HTML5 Required Attribute
- 1. The Form Tag has “novalidate” Attribute
- 2. Required Attribute Validation doesn’t Work with Unclosed Input Tags
- 3. The Button is Missing the Type
- 4. Input Elements aren’t Inside Form Tag
- 5. Absent Meta Tag might Cause Validation not Working
- 6. Action/Method Missing for HTML 5 Required Attribute Validation
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.
| Browser | Chrome | Firefox | Opera | Safari | Internet Explorer |
|---|---|---|---|---|---|
| Version | 5.0 | 4.0 | 9.6 | 10.1 | 10.0 |
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.
1 | remove_theme_support('html5', 'comment-form'); |
(ii) Alternatively, you can add the following JavaScript code in the footer.php file of the WordPress theme.
1 2 3 4 5 6 | <?php if( is_singular() ) : ?> <script type="text/javascript"> var commentForm = document.getElementById('commentform'); commentForm.removeAttribute('novalidate'); </script> <?php endif; ?> |
In the code above, we’re removing the attribute from the default WP comment form.
Also Read:
- Contact Form 7 validation error doesn’t disappear
- Styling Contact Form 7 validation with CSS and border
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.
1 2 | <input type="text" name="username" required /> <textarea placeholder="Your comment" required></textarea> |
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.
1 2 | <input type="submit" value="Send" /> <button type="submit">Send</button> |
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.
1 2 3 4 | <form> <input type="text" class="some-class" placeholder="Enter Name" required /> <input type="submit" value="Send" /> </form> |
We have a number of articles regarding form enhancement and validation. You would like to read:
- Min length validation
- Handling multiple forms on a single page
- Validate email address in jQuery or JavaScript
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.
1 | <form action="page_submission_URL" method="POST">...</form> |
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.
Google Recapcha Javascript also seems to disable ‘required’ and ‘disabled’ tags too.
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.
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.
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
Thank you, it is very helpful. my submit button was outside the form
They will also not work if you use javascript or JQuery to submit the form, it has to be the submit button.
Jquery – HTML Tag are not allowed in textarea
Submit
$(“.box”).focusout( function(e) {
var reg =//g;
if (reg.test($(‘.box’).val()) == true) {
alert(‘HTML Tag are not allowed’);
}
e.preventDefault();
});