HTML5 <input> required attribute but not inside <form>

html forms validation required
Jon picture Jon · Jul 22, 2015 · Viewed 8.8k times · Source

The Required attribute works great inside the form Tags:

<form>
<input type="text" name="user" required>
</form>

But can I use the required attribute if I cannot wrap it as a form? Outside of the form this input required does not work for me:

<input type="text" name="user" required>

I can replicate it with JavaScript but Id like to know if outside form is possible

Answer

Foaster picture Foaster · Jul 22, 2015

The "required" attribute only works on form submit and since your input has no form the browser does not know what to validate on submit.

What the w3c says about "required": When present, it specifies that an input field must be filled out before submitting the form.

This would only be possible with JS like:

document.getElementById('your_input_id').validity.valid

Already discussed here 4 years ago:

html5 input type required without a form. Does it work?

Related questions

HTML5 form required attribute. Set custom validation message?

I've got the following HTML5 form: http://jsfiddle.net/nfgfP/ Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". How would I change that default message to "This field cannot …

Read More
How to Call a JS function using OnClick event

I am trying to call my JS function that I added in the header. Please find below code that shows my problem scenario. Note: I don't have access to the body in my application. Everytime I click on the element …

Read More
Disable validation of HTML5 form elements

In my forms, I'd like to use the new HTML5 form types, for example <input type="url" /> (more info about the types here). The problem is that Chrome wants to be super helpful and validate these elements for …

Read More