[html] HTML5 required attribute seems not working

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.

This question is related to html required

The answer is


using form encapsulation and add your button type"submit"


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!


Yes, you missed the form encapsulation:

JSFiddle

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

Absence of Submit field element in the form also causes this error. In the case of "button" field handled by JS to submit form lacks the necessity of Submit button hence Required doesn't Work


As long as have added type="submit" to button you are good.

 <form action="">
    <input type="text" placeholder="name" required>
    <button type="submit">Submit</button>
</form>

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


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:

_x000D_
_x000D_
<meta charset = "UTF-8" />
_x000D_
_x000D_
_x000D_