Validate Text Field

Solved
amazezones
Excursionist
43 0 9

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)

Accepted Solutions
SaaSEnthu
Shopify Partner
66 11 13

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

View solution in original post

Replies 2 (2)
SaaSEnthu
Shopify Partner
66 11 13

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
amazezones
Excursionist
43 0 9

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...