CODEWITHSUNDEEP
javascripthtml
Mithilesh Bhutada
Mithilesh Bhutada

Reputation: 39

Why "required" attribute for <select> created by JavaScript is not working correctly?

I want to make it mandatory to select an option by adding the required attribute, but it doesn't seem to work. According to me, it's syntactically correct. Please help me. Thanks in advance.

function func() {
  var a = document.getElementById("input").value;
  if (a === "SE-IT-A" || a === "SE-IT-B") {
    var arr = ["Choose Subject", "DBMS", "DSA"];
  } else if (a === "TE-IT-A" || a === "TE-IT-B") {
    var arr = ["Choose Subject", "CNS", "ADMT"];
  }

  var string = "";

  for (i = 0; i < arr.length; i++) {
    string = string + "<option>" + arr[i] + "</option>";
  }
  string = "<select required name='second'>" + string + "</select>";
  document.getElementById("output").innerHTML = string;
}
   
<form>
        <select name="class" id="input" onchange="func()" required>
          <option value="">Choose Class</option>
          <option value="SE-IT-A">SE-IT-A</option>
          <option value="SE-IT-B">SE-IT-B</option>
          <option value="TE-IT-A">TE-IT-A</option>
          <option value="TE-IT-B">TE-IT-B</option>
        </select><br>
        <div id="output"></div>
</form>

Upvotes: 0

Views: 153

Answers (2)

Beniamin H
Beniamin H

Reputation: 2086

Adding disabled to your first option may solve the problem:

<select name="class" id="input">
  <option value="" disabled selected>Choose Class</option>
  <option value="SE-IT-A">SE-IT-A</option>
  <option value="SE-IT-B">SE-IT-B</option>
  <option value="TE-IT-A">TE-IT-A</option>
  <option value="TE-IT-B">TE-IT-B</option>
</select>

If you want to use required than you should use your select inside a <form> tag. But you must ensure that all your <option> values are set properly. Take a look on these two selects:

<form>
  <select name="class" id="input" required>
    <option value="">Choose Class #1</option>
    <option value="SE-IT-A">SE-IT-A</option>
    <option value="SE-IT-B">SE-IT-B</option>
    <option value="TE-IT-A">TE-IT-A</option>
    <option value="TE-IT-B">TE-IT-B</option>
  </select>
  <select name="class" id="input" required>
    <option>Choose Class #2</option>
    <option value="SE-IT-A">SE-IT-A</option>
    <option value="SE-IT-B">SE-IT-B</option>
    <option value="TE-IT-A">TE-IT-A</option>
    <option value="TE-IT-B">TE-IT-B</option>
  </select>
  <button type="submit">Submit</button>
</form>

Both are required, but the second has an option without any value attribute. According to MDN docs:

If no value attribute is included, the value defaults to the text contained inside the element.

So all your dynamic options added in JS actually have value.

To fix it you need to alter you JS and set the proper value on your options. Something like:

for (i = 0; i < arr.length; i++) {
  let value = i ? arr[i] : "";
  string = `${string}<option value="${value}">${arr[i]}</option>`;
}

Upvotes: 1

Aobo Cheng
Aobo Cheng

Reputation: 4528

required attribute works only when you get a form to wrap the select element and has a button(or input) whose type is submit to handle the form submit action.

<form>
  <select required>
    <option> any thing </option>
  </select>
  <button type="submit"> Submit the form </button>
</form>

when you click the submit button browser will warn you that the select field is required.since you are using your custom js handler, you won't get the browser warning.

Take Form data validation as a reference, search The required attribute section for details.

Upvotes: 1

Related Questions