Forum
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.
What should I be adding or modifying to my existing code, please help.
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>
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 apattern
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!
Yes, you can use a pattern like the ones I linked to.
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.
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 :)