Contact form phone number validation

Solved
Highlighted
New Member
2 0 1

Hi,

I'm tryin to validate the phone number in my shopify contact form. It has to start with the digits 6,7,8 and 9 and has to be 10 characters in length.

I would like to validate it within the html part of my code using liquid other than using javascript.

Below is my code for the form.

 {% form 'contact' %}
 
       {% if form.posted_successfully? %}
          
 
    
        {% endif %}
 
        {{ form.errors | default_errors }}
 
     
 
     {% assign name_attr = 'contact.form.name' | t | handle %}
      
       <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
        <input type="text" id="ContactFormName" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}" required/>
 
        <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
        <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" required/>
 
        {% assign name_attr = 'contact.form.phone' | t | handle %}
        <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
        <input type="tel" id="ContactFormPhone" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}" required/>
  <input type="submit" class="btn center" value="View Plans" style="background-color: #4CC7E6;" onclick="openPlans()" >
{% endform %}
 
Any help would be great.
 
Thanks
Sagar
1 Like
Highlighted
Shopify Partner
6211 907 2109

This is an accepted solution.

@sagarsubbaiah 

Thanks for post.

can you please try this code.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like