Solved

Make registration field as required

Ram_A
Explorer
60 3 19

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>

 

 

Accepted Solution (1)

Simonsron
Shopify Partner
699 87 122

This is an 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.

banned

View solution in original post

Replies 3 (3)

Simonsron
Shopify Partner
699 87 122

This is an 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.

banned
Ram_A
Explorer
60 3 19

Thanks, Simonsron,

 

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

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

Simonsron
Shopify Partner
699 87 122

You are welcome!

banned