Phone number validation

Hey @jmill23,

The HTML5 ‘tel’ input does not validate syntax.

Instead, Ninja Forms offers an input mask feature for forcing a particular syntax. In the “phone” field settings, see Restrictions -> Input Mask. There is a provided mask for ‘US Phone’, but you can specify a custom mask for different phone number formats.

I’ve tested it on Chrome and IE on desktop and the browser is not validating the HTML5 tel field which should be normal behaviour. I have tested on my iPhone and it does work however.
I know there’s an input mask…but not much good if i’m outside of the US or the user inputs mobile numbers.

I have a JS script that validates the string length and if the value is numerical or not. Is there a way to add this to the form?

• This reply was modified 7 years, 10 months ago by jmill23.

Unlike the URL and E-mail types, the Telephone type does not enforce a particular syntax. This is intentional; in practice, telephone number fields tend to be free-form fields, because there are a wide variety of valid phone numbers.

Source: https://www.w3.org/TR/html5/forms.html#telephone-state-(type=tel)

If you are wanting to add your own validation script, then you can enqueue it on the page.

Yes, but the browser is allowing me to enter text into a number field…this should flag an error on submit – should it not?

No, that is not the default expected behavior of the field.

The HTML5 specification makes no assumption as to telephone syntax, except to remove line breaks.

While some websites may provide custom validation and some browsers might provide additional functionality (ie smartphone keyboard swapping), validation is not a part of the specification.

There’s an interesting solution here: https://www.sitepoint.com/client-side-form-validation-html5/

Could implement something like:
<input id="phone" type="tel" pattern="[0-9]+" required>

This would at least limit to numerical…