All things Shopify and commerce
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 %}
Solved! Go to the solution
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
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
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...
did you found solution to this?
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:
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 👍.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024