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

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

Answer 4

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>

Answer 5

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 6

I had the same problem. I was doing a onClick on the submit button and that was causing the problem. Instead, try to put a onSubmit="anyAction" in the form and that should work.

Pierre

Answer 7

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 8

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 9

using form encapsulation and add your button type"submit"

Answer 10

Seven years late, but I have a similar issue, and I realised it was caused by the refreshing of the page by the form submiting. As I set it to not auto refresh on submit, I had enough time to see the browser actualy require for the input to get filled.

Answer 11

I was facing the same issue. In my case the problem was the return statement within the input tag:

<input type="submit" onclick="function_call(); return false;">

Removing the return false; statement solved my issue.

Answer 12

In React, after wrapping your inputs with a form, you can use the onSubmit={} attribute instead of onClick={}. In this particular problem (pertaining to the question), others might want to see this answer.

Important to note: (for React) If you want to utilize the e.preventDefault() method, add the onSubmit={(e) => e.preventDefault()} attribute to your form tag directly, and use the onClick={} in your submit input or button.