[ANSWERED] Input Mask

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[ANSWERED] Input Mask

Post by paulp575 »

Developing an online HTML for and want the user to enter their phone number.
They are supposed to enter only numbers; no parenthesis and no dashes.
As they enter their numbers, I'd like it to display in a formatted way: (999) 999-9999
I'd tried to use the "pattern" attribute with no success.
I'd also tried to use the "data mask" attribute with no success.
Here's my code:

Code: Select all

<tr>
  <td class="TEXT-BOLD">
    <label for="HOME_PHONE">Home phone:</label>
  </td>
  <td>
    <input type="tel" name="HOME_PHONE" id="HOME_PHONE" size="40" title="Numbers only; include your area code" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
  </td>
</tr>
What am I doing wrong?

Thanks.
Last edited by paulp575 on Sat Jun 17, 2023 12:15 am, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Input Mask

Post by Albert Wiersch »

Hello,

The "pattern" attribute is only used to validate the input value and should prevent a user from submitting a form if the number doesn't match the pattern. This should be good for making sure a user enters at least 10 numbers before they submit the form.

I wasn't sure by what you meant by "data mask" attribute but perhaps you mean using a "data-inputmask" attribute per this article:
https://css-tricks.com/input-masking/

It says you'll need to use the jQuery dependency to get that working.

Looks like there is no simple, native HTML solution to what you want to do. It's going to require scripting and/or a plug-in/dependency.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Input Mask

Post by paulp575 »

A "data mask" pre-fills the textarea with the format of the data so when someone enters their phone number - numbers only, rather than a bunch of numbers - 5553456789 - it would show as (555) 345-6789.

JQuery as above my knowledge area.

I thought maybe by using the pattern attribute it would format the input, but I guess not.
paulp575
Post Reply