Validate Text Field

[amazezones]

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 %}

[SaaSEnthu · 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

[amazezones]

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