Validating custom form field requiring phone number

(Ryan Archer) #1

I am really surprised that I haven't found this on the forum already.

I am setting up a custom multi page form and I want some Telephone number fields to be validated for numbers so that users don't insert other strange characters.

 

But for obvious reasons, users like to put it area codes and stuff with spaces or separate with dashes or brackets. Now this causes an issue for the form validation and it shows up as an error - even using a space in the number shows up as an error.

 

Is there a way around this where I can enable the user to still use these characters [ -() ] and a 'space' also in a form field and NOT have an error message appear?

 

Even go as far as have two field boxes (one for area code and one for number) like as is fairly common out there on forms on the web.

(Peter McLeod) #2

Hi

could just use a regular input (type=text) field and use a regex to validate it according to the specifics that you need.

Thanks

Peter

(Bart Banda) #3

Yep, what Peter said. You could also use the HTML validation patterns perhaps to make the validation happen client side for HTML5 compliant browsers: http://www.sitepoint.com/client-side-form-validation-html5/

(Ryan Archer) #4

Thanks for the advice guys. I did check it out but the link you gave me Bart sounded a bit too prescriptive (specifying an exact format). I was just looking to validate numbers but provide some exceptions to a select range of special characters.

 

Maybe this is something that regex can achieve if I take some time to look at it in more depth. Not sure how good the HTML5 validation will go as we still have to support IE7 up (although there is rumours that we might be able to completely drop IE7 and IE8 support like we did IE6 years ago!)

(Bart Banda) #5

Another option would be to use a JS plugin to mask the input to make it clearer for the user what they are inputing:

 

https://igorescobar.github.io/jQuery-Mask-Plugin/

(check Telephone with Code Area example)

 

Others; http://www.jqueryrain.com/demo/jquery-mask-input-plugin/