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.

回答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>

回答2:

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

回答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!

回答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>

回答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" />

回答6:

using form encapsulation and add your button type"submit"

回答7:

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

来源：https://stackoverflow.com/questions/17966390/html5-required-attribute-seems-not-working