Shopify Question posted in
The Shopify help center can be found here.

How to control <select required> behavior with html/javascript? – Shopify

I have created this on my Shopify website:

<select class="className" name="valueSelect" id="testId" required>
    <option value="none" selected disabled hidden></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

The problem is that the doesn’t work if the gender value isn’t selected – leaving it empty still let’s me through. Is there a way to control this?

Tags:

3

Answers


  1. 0

    You can remove empty option and set default value, for example A.

    Login or Signup to reply.
  2. 0

    Assuming that the validation or submission of select happens when the user clicks a button and this invokes a function.

    The value can be checked and then the function call can be made on the button click

     const select = document.querySelector("#testId")
  if(select.value!=="none"){
    //call the function which was previously called on button click
  }
    Login or Signup to reply.
  3. 0

    You can use javascript like this.(check running snippet)

     function func(){
        var x = document.getElementById("testId");
        if(x.value == "none"){
            x.style.border = "2px solid red";
            document.getElementById("warning").style.display = "block";
        }
        else{
            x.style.border = "none";
            document.getElementById("warning").style.display = "none";
        }
        
        }
    <select class="className" name="valueSelect" id="testId" required>
        <option value="none" selected disabled hidden></option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <button id="btn" onclick="func()">submit</button><br>
    <span id="warning" style="color:red;display: none;">Fill required fields</span>

    Just give id="btn" to your submit button and onclick="func()" and paste this javascript.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search