I can't add the required attribute to a select tag

Question

I have an HTML <select> tag and I want to make it dynamically required. I tried with jQuery but nothing happens.

This is the <select>

<select class="form-control" type="text" id="status">
  <option value="" selected disabled>----- * ----</option>
  <option value="1" >inactive</option>
  <option value="2" >active</option>
</select>

I tried with JavaScript:

document.getElementById("status").required = true

and then with jQuery:

$('select[id=status]').prop('required', true);

$('#status').attr('required');

But none of those worked, no error, nothing.

Edit: this problem is specific to <select>. With <input> it works fine.

https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields — react_or_angluar, Oct 30 '20 at 20:25
Does this answer your question? [jQuery add required to input fields](https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields) — Randy Casburn, Oct 30 '20 at 20:28
Your first try works for me: https://jsfiddle.net/barmar/x12978ne/2 — Barmar, Oct 30 '20 at 20:34

score 0 · Answer 1 · answered Oct 30 '20 at 20:34

How to handle attributes...

Input_ID.setAttribute('required',''); // SET the attribute


if(Input_ID.hasAttribute('required')){}  // TEST if the attribute exists


R=Input_ID.getAttribute('required'); // GET the value of the attribute


Input_ID.removeAttribute('required') // REMOVE the attribute

Given all the above options you should be able to solve this problem.

Zsolt Meszaros · Answer 2 · 2022-01-16T20:24:07.630

0

In vanilla JS you can use setAttribute() with an empty string as the value to add the required tag:

document
  .getElementById("status")
  .setAttribute("required", "")

edited Jan 16 '22 at 20:24

answered Oct 30 '20 at 20:36

Zsolt Meszaros

21,961
19
54
57

I can't add the required attribute to a select tag

2 Answers2