Forum

Thread tagged as: Question, Problem

Validate telephone number field.

Hi,

I'm not sure what am I missing here, I am working on a form, in which I need the telephone number field to accept only numbers & a few special characters like -,(,),#. Also the maximum length of input can be up to 15 characters & minimum 10.

  1. What should I be adding or modifying to my existing code, please help.

  2. Please be advised, if there is any way I can clear all the form fields after the form submission, it currently keeps all the entered inputs in all the respective field after submission.

Code for the telephone no. field:

<div class="form-group">
     <perch:input type="number" id="Telephone_number" class="form-control" placeholder="Telephone number" required="required" />
</div>
Damian McCracken

Damian McCracken 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

You probably don't want to use type="number" as that only accepts numbers. type="tel" might be appropriate, but you'll want to back it up with a pattern attribute containing the regular expression you want to validate against.

There's some good examples here: https://html5pattern.com/Phones

Thanks Drew, I changed to type="tel" without mentioning any pattern bcoz I do not want to stick to any country specific phone pattern. Although it still does excepts string type input in the type = "tel" fields, anything else we can do about it?

Do you have any advise fro my 2nd question, which was;

Please be advised, if there is any way I can clear all the form fields after the form submission, it currently keeps all the entered inputs in all the respective field after submission.

Thanks in advance!

Drew McLellan

Drew McLellan 2638 points
Perch Support

Although it still does excepts string type input in the type = "tel" fields, anything else we can do about it?

Yes, you can use a pattern like the ones I linked to.

Please be advised, if there is any way I can clear all the form fields after the form submission

Are you looking to redisplay the form but without the values? I'm not sure what I'm supposed to be advised of here.

Yes, I was to re-display the form but without values. How can I have the form values cleared and set back to default, once the form on the webpage is submitted, or the webpage is refreshed.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Your best bet would be to add the same page as the redirect URL for the form. Otherwise the values still exist in the post data and therefore the form is repopulated just as when a validation error occurs.

Ok, I'll work around with your suggestion. Thanks Drew :)