HTML5 required attribute seems not working

Question

I can't figure out why the new required attribute of HTML5 seems to not be working, and I know my simple code seems to be okay. What should I do to make this work?

Here is my code in HTML:

<input type = "text" class = "txtPost" placeholder = "Post a question?" required>
<button class = "btnPost btnBlue">Post</button>

Correct me if I'm wrong but, if ever I run the code in the browser and click the button without any value in the textbox it should have a tooltip showing that that field was required, shouldn't it? But nothing happens no matter how many times you click the button. Am I misunderstood on how to use the required attribute?

I am running my code in google chrome Version 28.0.1500.72.

Answer 1

Try putting it inside a form tag and closing the input tag:

<form>
  <input type = "text" class = "txtPost" placeholder = "Post a question?" required />
  <button class = "btnPost btnBlue">Post</button>
</form>

Answer 2

Make sure that novalidate attribute is not set to your form tag

Answer 3

Actually speaking, when I tried this, it worked only when I set the action and method value for the form. Funny how it works though!

Answer 4

Yes, you missed the form encapsulation:

JSFiddle

<form>
   <input id="tbQuestion" type="text" placeholder="Post a question?" required/>
   <input id="btnSubmit" type="submit" />
</form>

Answer 5

My answer is too late, but it can help others.

I had the same problem, even when I used a form tag.

I solved it by declaring Meta Charset in the header of the page:

<meta charset = "UTF-8" />

Answer 6

Post

Put this in form tag and method is POST

If using MVC then check from your jquery if text is not fill then return it automatically show the message