Stop Product page form from being submitted when empty

[Kevin_Hayes]

Hi All,

On my product page I need to collect some required text input. I have the form working but it can be submitted when it is empty. I need the text info from the customer to show up on the cart page, and I need to get this info on the order. This is all currently working with the following code, but again the product can be added to the cart even if the form is empty.

I have added a "Custom liquid" block to my product page with the following code:

<label for="top_line" class="form__label">Top Line (Maximum 38 Characters):</label>
<div class="field">
<input required type="text" maxlength="38" id="message" class="text field__input" placeholder="Top Line" name="properties[Top Line]" form="product-form-{{ section.id }}"></text>
</div> 

I tried to add requited class="required" but this did not work.

Thank for any input or suggestions!

[Simonsron]

Because you have entered the wrong code.

<label for="top_line" class="form__label">Top Line (Maximum 38 Characters):</label>
<div class="field">
<input required type="text" maxlength="38" id="message " class="text field__input" placeholder="Top Line" name="properties[Top Line]" />
</div> 

try this

[Kevin_Hayes]

Very nice of you to respond Simonsron! Thank you very much.

I have tried your code but it still takes the customer to the cart page with the field empty.

Also, with this new code, the top-line info is now not visible in the cart.

I have three lines of text that the customer needs to enter: Top line, name, and bottom line. Below you can see that now the top line is missing from the shopping cart with this new code.

I am using Ride theme 8.0.0

Online I saw others talking about the nonvalidate issue, but I can't find this in the code anywhere.

[Simonsron]

The reason for this could be that the top row is not filled in or that something is restricted.

You will need to check the code to find the cause of this.

[gr_trading]

@Kevin_Hayes 

I tried to add requited class="required" but this did not work.

just to update you should use term required="required".

However not sure if it will. To make sure the functionality.

You should write script which will prevent form submission to ensure required fields to fill.

[achchiraj26]

How we can prevent form submission, i have tried to select the form and listening for the submit event then add this to the call back `event.preventDefault()`

Here is the code that i am talking about:
form.addEvenListener('submit', event => event.preventDefault());

this does not work with me, the event does not listened.