Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 required attribute seems not working

Tags:

html

required

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.

like image 279
HTTP Avatar asked Jul 31 '13 09:07

HTTP


People also ask

How required attributes work in HTML?

Definition and Usage The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Why required is not working in react?

The required attribute only works with default form actions. You'll need to do your own validation in the handler. Also, if you want the form's onSubmit to not reload the page then you need to invoke preventDefault() on the onSubmit event object.

How do I bypass HTML5 validations?

To ignore HTML validation, you can remove the attribute on button click using JavaScript. Uer removeAttribute() to remove an attribute from each of the matched elements.


1 Answers

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> 
like image 131
LDJ Avatar answered Sep 22 '22 22:09

LDJ