Validate Phone number Inputs in HTML5

In this article, you will learn how to validate a phone number input using HTML5.Input elements of type tel allow a user to input telephone…

The post Validate Phone number Inputs in HTML5 appeared first on CodeSource.io.


This content originally appeared on CodeSource.io and was authored by Prince Chukwudire

In this article, you will learn how to validate a phone number input using HTML5.
Input elements of type tel allow a user to input telephone digits. What it however doesn’t provide, is validation to a particular format.

To achieve the said validation, we can use the pattern attribute which allows us to slot in Regular Expressions. Here’s an example of such which evaluates user input to this:
xxx-xxx-xxx

  <input type="tel" id="contact" name="contact" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

The post Validate Phone number Inputs in HTML5 appeared first on CodeSource.io.


This content originally appeared on CodeSource.io and was authored by Prince Chukwudire


Print Share Comment Cite Upload Translate Updates
APA

Prince Chukwudire | Sciencx (2021-03-02T11:22:20+00:00) Validate Phone number Inputs in HTML5. Retrieved from https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/

MLA
" » Validate Phone number Inputs in HTML5." Prince Chukwudire | Sciencx - Tuesday March 2, 2021, https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/
HARVARD
Prince Chukwudire | Sciencx Tuesday March 2, 2021 » Validate Phone number Inputs in HTML5., viewed ,<https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/>
VANCOUVER
Prince Chukwudire | Sciencx - » Validate Phone number Inputs in HTML5. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/
CHICAGO
" » Validate Phone number Inputs in HTML5." Prince Chukwudire | Sciencx - Accessed . https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/
IEEE
" » Validate Phone number Inputs in HTML5." Prince Chukwudire | Sciencx [Online]. Available: https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/. [Accessed: ]
rf:citation
» Validate Phone number Inputs in HTML5 | Prince Chukwudire | Sciencx | https://www.scien.cx/2021/03/02/validate-phone-number-inputs-in-html5/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.