Solved

Can You Validate a Text Field to Only Accept Numbers in Shopify?

amazezones
Explorer
82 0 13

Hi,

 

Could anyone help me in how to validate a text filed. I have a text filed what I want is that shoppers can just enter numbers 0-9 and if they type any letter or other character it give error.

 

my code is 

 

{% if product.title contains 'Num %}

<p class="line-item-property__field">
<label for="enter-plate-number-max-5-digits">Enter Plate Number (Max 5 Digits)</label>
<input required class="required" id="enter-plate-number-max-5-digits" type="text" name="properties[Enter Plate Number (Max 5 Digits)]">
</p>

abel for="monogram">Enter Code</label>
<input required id="monogram" style="width:70px; max-width:100%;" type="text" name="properties[Code]">
<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>

{% endif %}

Accepted Solution (1)

SocialAutoPost
Shopify Partner
426 58 104

This is an accepted solution.

Hello @amazezones 

 

You need to add some validations. Please replace this code (your existing code)

 

 

<input required id="monogram" style="width:70px; max-width:100%;" type="text" name="properties[Code]">

 

 

with below code (fresh code with validations)

 

 

<input type="text" id="monogram" style="width:70px; max-width:100%;" name="properties[Code]" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="\d{5}" maxlength="5" required>

 

 

It will prevent user to enter Alphabets and only allow 5 digits

 

Thanks

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

View solution in original post

Replies 4 (4)

SocialAutoPost
Shopify Partner
426 58 104

This is an accepted solution.

Hello @amazezones 

 

You need to add some validations. Please replace this code (your existing code)

 

 

<input required id="monogram" style="width:70px; max-width:100%;" type="text" name="properties[Code]">

 

 

with below code (fresh code with validations)

 

 

<input type="text" id="monogram" style="width:70px; max-width:100%;" name="properties[Code]" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="\d{5}" maxlength="5" required>

 

 

It will prevent user to enter Alphabets and only allow 5 digits

 

Thanks

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
amazezones
Explorer
82 0 13

thx its working for me... There is one more thing could you help... Currently shoppers can add to cart without filling the field, how can I make it compulsory...

Rajzzsoni
Shopify Partner
5 0 1

did you found solution to this?

EasifyApps-Zoe
Shopify Partner
582 14 40

Hi @amazezones.,

While you have already received a solution, I'd like to offer another user-friendly alternative to create a field for shoppers to enter numbers 0-9 with validation, without requiring any coding. This option can be helpful for you and other members in the future 😊.

You can achieve this by using the Free version of the Easify Product Options app. Follow these steps to set it up quickly:

  • Create a new option set:

EasifyAppsZoe_0-1691403634982.png

 

  • Add a text field using the "Number Text Box" option type provided by the app. You can set the max value to "99999" if customers are allowed to enter up to 5 digits. Optionally, you can add a help text of "Max 5 Digits" to guide customers:

EasifyAppsZoe_2-1691403803976.png

EasifyAppsZoe_4-1691404145825.png

 

  • If customers enter text instead of a number, the app will show an error message:

EasifyAppsZoe_3-1691404131609.png

 

  • Select the products on which you want to display the custom text fields on their product pages, and you're all set!

EasifyAppsZoe_1-1691403646826.png

 

As you can see, creating a number text field with the Easify Product Options app is straightforward and efficient. Keep this option in mind for any similar issues in the future 👍.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support