How to make a custom field required on a product page?

Store Design
1

I added this code in custom liquid on a product page but I cannot figure out how to make it required (can’t add to cart without filling field). Could someone please help? Thanks

Username:

1 Like
2

@gators

Add code like this,

<textarea rows="10" id="ContactFormMessage" name="contact[body]" required>
3

Hi,

To achieve this you need to check the teaxtara if it is blank or not.

If the textarea is bank disable the button else enable the button.

You can share your store url with example so I can write a small piece of code for you.

Thanks

4

I put the form on this product page:

(website removed)

5

Hi,

Add below code in gloabl.js.liquid file .

let input = document.querySelector("#username");
let button = document.querySelector(".product-form__submit");

button.disabled = true; 

input.addEventListener("change", stateHandle);

function stateHandle() {
    if (document.querySelector("#username").value === "") {
        button.disabled = true; 
    } else {
        button.disabled = false; 
    }
}

Thanks

Hit Like and Accept as Solution

1 Like