One of the common issues with HTML forms is how to handle a variety of input from the user, while maintaining compatibility with the system that is the destination for the values from the form (e.g. a CRM system, a database, etc.)
I ran into this issue head-first at work, when we discovered that a specific CRM that our leads were being sent to required that phone numbers be in a specific format (###-###-####), but our form allowed users to input characters into the phone number field in whatever format they wanted. There are two main options here.
- One, you can force users to enter their phone number in your format (break up the phone field into three separate fields, then use JS to concatenate the fields with dashes). I don't like this method, because it has the potential to confuse users and doesn't always work with browsers that store past field values.
- A better method is to simply change the users input to the preferred format, after they have already entered it.
Depending on your personal preference, you might want to add more to my code (e.g. validation of the number, warn user if number is not valid, etc).