how to make html input required using JavaScript?

Question

Could you tell me how to achieve html input: <input id="blablabla" required> using javascript

all web answers i have found suggest to write something like:

input.setAttribute('required','true');
input.setAttribute('required','');
input.required='true'

but them all give me something like:

<input id="blablabla" required=''>

or

<input id="blablabla" required='true >

and they doesn't work

Only html that works is <input id="blablabla" required>

Could you help me ?

Thanks

Does this answer your question? [How to set HTML5 required attribute in Javascript?](https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript) — Pablo Silió, Jul 18 '22 at 08:15
https://jsbin.com/xadacumada/1/edit?html,js,output — I can't reproduce the problem. — Quentin, Jul 18 '22 at 08:16

score 0 · Answer 1 · answered Jul 18 '22 at 08:58

I found your example as well as the other answers working perfectly.
Are you sure you did the right thing? Also you can put like this, it will work too!

myInput.setAttribute('required', 'required');

Example code: Please click Add required and then click Submit

function addRequired() {
  const myInput = document.getElementById('inputText');
  myInput.setAttribute('required', 'required');
  alert('Input has been added required!');
}

function removeRequired() {
  const myInput = document.getElementById('inputText');
  myInput.removeAttribute('required');
  alert('Input has been removed required!');
}

<form>
  <input id="inputText" type="text">
  <button type="button" onclick="addRequired()">Add required</button>
  <button type="button" onclick="removeRequired()">Remove required</button>
  <button>Submit</button>
</form>

SbManolo · Answer 2 · 2022-07-18T08:35:50.187

-1

You can do this in any of the following ways:

const myInput = document.getElementById('blablabla');

myInput.required = true // Method 1
myInput.setAttribute('required', true); // Method 2

To get something like <input id="blablabla" required> you have to use the first method

If you're looking for the typical asterisk to appear, that's something you have to add manually, with JS or CSS. But if you check the attributes of the element (by inspecting the HTML of the page) you can see that the required attribute has been added.

edited Jul 18 '22 at 08:35

answered Jul 18 '22 at 08:32

SbManolo

115
2
9

The question says they tried those approaches already. – Quentin Jul 18 '22 at 08:33
He actually said he used 'true', in quotes, not true as a boolean. – SbManolo Jul 18 '22 at 08:34
That won't make any difference since JS does type coercion. – Quentin Jul 18 '22 at 08:35
Then why myInput.required = 'false' sets the attribute required?. Method 1 works perfect – SbManolo Jul 18 '22 at 08:40
Because (still) of type coercion and any non-empty string is truthy. I said it didn't make a difference changing from `'true'` to `true`. – Quentin Jul 18 '22 at 08:42
You're right there. My bad. – SbManolo Jul 18 '22 at 08:56

how to make html input required using JavaScript?

2 Answers2