How to add validations for email and phone in contact form?

Shopify Discussion
1

Hello,

Please guide me step by step - how to add validations for email and phone number field.

2

Hi Prasad22kar,

Validations for form fields would follow the same approaches for validations in HTML5 Forms - eg adding pattern attributes to input elements so they follow a specific expression. You can see an example of this on Dawn’s contact form where the phone field has the pattern attribute set as [0-9-]*, which allows any combination of numbers and dashes, including an empty string.

You could also create a javascript function to validate fields like an email field to prevent specific email addresses from being entered, eg:

This script would prevent someone from entering test@test.com as their email, and when you add an onsubmit attribute to the form tag to call this function, (so it would look something like: {%- form 'contact, ... onsubmit: 'return validateEmail()' -%} ) it will display an error message:

14-13-d7090-wll4h.png
14-13-d7090-wll4h.png1654×844 43.1 KB

There may be other types of validation you’d want to use and generally they will follow the same pattern on Shopify as they would on any other platform that uses HTML.

Hope this helps!

3

Hello @Liam

My self Jay,

Can you help me regarding validation on form

  1. On e-mail subscribe field if type name without extension for ex “jay@abc” it does not show any error or warning.

  2. Same is on account detail page where there is option to add or edit address. There is not a single mandatory fields and on mobile number fields if I type text then also it does not show error

The above issue is occurred on all the theme including the Dawn

I think this is basic validation that Shopify should provide being an amazing cart it does not look good when this type of validation are not provided.

Thank you in advance