How to make registration fields required in dropdown menu?

[Ram_A]

Hi,

On customer registration I have a customized "dropdown menu" to select his company name from a preexisted list name. I want that field to required to select from.

Also if he select "Other" from the dropdown menu, a new field appears  and I need it  "required" as well.

would appreciate any help,

 code:

 <div class="field">
            
      <label for="CompanyName">Company</label>
      <div class="select"  >
        
        <select  id="CompanyName" name="customer[company]" >
          
          <option value="NaN" >Your company...</option>
        </select>

        {% render 'icon-caret' %}
      </div>
    </div>

    <div class="field hidden">
      <input
          type="text"
          name="customer[company_other]"
          id="CompanyName-Other"
          placeholder="Company name"
      >
      <label for="CompanyName-Other">
        Company name
      </label>
    </div>

[Simonsron · Accepted solution]

 <div class="field">
            
      <label for="CompanyName">Company</label>
      <div class="select"  >
        
        <select  id="CompanyName" name="customer[company]" required>
          
          <option value="A" >Your companyA...</option>
          <option value="B" >Your companyB...</option>
          <option value="other" >other company</option>
        </select>

        {% render 'icon-caret' %}
      </div>
    </div>

    <div class="field hidden" id="companyOther">
      <input
          type="text"
          name="customer[company_other]"
          id="CompanyName-Other"
          placeholder="Company name"
      >
      <label for="CompanyName-Other">
        Company name
      </label>
    </div>
<script>
        let CompanyName = document.getElementById("CompanyName")
        let companyOther = document.getElementById("companyOther")
        CompanyName.onchange=function(){
      
            if (this.value == "other") {
                companyOther .className = "field"
            }else{
                companyOther .className = "field hidden"
            }
        }
</script>

You can try this.

[Ram_A]

Thanks, Simonsron,

the "required" location was what I am looking for... Thanks

<select id="CompanyName" name="customer[company]" required>

[Simonsron]

You are welcome!