10 Digit Phone Number Validation in HTML

This code provides 10 Digit Phone Number Validation in HTML. It works by using a regular expression to check if a given phone number is valid. The major functionality is to determine if a phone number follows the pattern of a 10-digit number, including various formats like 555-555-5555, (555)555-5555, and more. This code is helpful for ensuring that user-input phone numbers are in the correct format before processing them further.

You can use this code in web forms or applications that require users to input phone numbers. Moreover, the UI design can be customized according to your needs.

How to Validate 10-Digit Phone Number Using HTML and JavaScript

1. First of all, load Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>

2. Now, create the necessary structure for your form. You’ll need an input field for users to enter their phone numbers and a button to trigger the validation process. For example:

<header>
    <h1>@learnMern</h1>
    <h3>Simple JavaScript Template</h3>
    <p>Everything below this line is created with JavaScript</p>
  </header>

  <div class="container">

    <div class="container container__main">
      <div class="container container__header">
        <i class="fa fa-phone fa-3x"></i>
        <h1>Validator</h1>
      </div>

      <input id="userPhoneNum" type="text" placeholder="Enter phone number">
      <button class="btn btn__primary" onclick="submit()">Validate</button>
      <button class="btn btn__secondary" onclick="clearSubmit()">Clear</button>

      <div id="content" class="content">
        <h3>Phone Number Validation Return</h3>
        <p id="content__phoneNumber"></p>
      </div>
    </div>

  </div>

3. The following code contains CSS variables to style your form. Make sure to include these variables in your CSS to ensure consistent styling:

:root {
  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;
  --white: #ffffff;
  --greyLight-1: #e4ebf5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
  background: var(--greyLight-1);
  color: var(--primary);
}
@media screen and (min-width: 900px) {
  html {
    font-size: 75%;
  }
}

h3 {
  color: rgba(109, 93, 252, 0.89);
}

p {
  color: rgba(109, 93, 252, 0.6);
}

header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  background: var(--greyLight-1);
}
.container__main {
  width: 50%;
  min-height: 200px;
  border-radius: 1rem;
  margin: 4rem;
  padding: 2rem;
  box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
}
.container__header {
  width: 100%;
  justify-content: space-between;
  padding: 2rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 1rem;
  color: rgba(109, 93, 252, 0.89);
}

.content {
  display: none;
  flex-direction: column;
  border-radius: 1rem;
  box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
  padding: 2rem;
  width: 100%;
  margin: 2rem 0;
}

span {
  color: #ff073a;
  font-weight: bold;
}

input {
  width: 100%;
  margin: 2rem 0 1rem 0;
  height: 3rem;
  border: none;
  border-radius: 1rem;
  font-size: 1rem;
  padding-left: 1rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  background: none;
  font-family: inherit;
  color: var(--greyDark);
}
input::placeholder {
  color: var(--greyLight-3);
}
input:focus {
  outline: none;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}
input:focus + .search__icon {
  color: var(--primary);
}

.btn {
  width: 100%;
  height: 3rem;
  margin: 2rem 0 1rem 0;
  font-family: inherit;
  font-size: 1rem;
  border: 0;
  padding: 0;
  border-radius: 1rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}
.btn__primary {
  background: var(--primary);
  box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  color: var(--greyLight-1);
}
.btn__primary:hover {
  color: var(--white);
}
.btn__primary:active {
  box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
}
.btn__secondary {
  color: var(--greyDark);
}
.btn__secondary:hover {
  color: var(--primary);
}
.btn__secondary:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

@media only screen and (min-width: 768px) {
  input {
    width: 30%;
  }

  .btn {
    width: 20%;
  }

  .container__main {
    justify-content: space-between;
  }

  .btn__primary {
    position: relative;
    left: 10%;
  }
}

4. Finally, include the following JavaScript code in your project to validate the phone numbers. Add the following script tag just before the closing </body> tag in your HTML:

// DOM variables
const userPhoneNum = document.getElementById("userPhoneNum");
const content = document.getElementById("content");
const content__phoneNumber = document.getElementById("content__phoneNumber");

// regex variable to match valid 10 digit phone numbers 555-555-5555, (555)555-5555, (555) 555-5555, 555 555 5555, 5555555555, 1 555 555 5555
const regex = /^1?\s?(\(\d{3}\)|\d{3})(\s|-)?\d{3}(\s|-)?\d{4}$/gm;

// logs an explanation of the regex
const regexSummary = (regex) => {
  console.log(`regex: ${regex} \n
    **** ^1? **** matches strings that start with 1 and 1 is optional.
      ^ anchor matches the beginning of the string.
      ? quantifier is for optional\n
    **** \\s? **** followed by a space and space being optional 
      \\s character class matches whitespace; spaces, tabs, and line breaks.\n
    **** (\\(\\d{3}\\) **** followed by open parentheses and three digits followed by closed parentheses. \n
      \\d matches any digit 0-9
      {3} matches three digits \n
    **** | **** or \n
      | acts as a boolean Or and matches the expression befor or after the | \n
    **** \\d{3})(\\s|-)? **** followed by three digits followed by an optional space or hyphen. \n    
    **** | **** or \n
    **** \\d{3}(\\s|-)? **** followed by three digits and an optional space or hyphen. \n
    **** \\d{4}$ **** followed by four digits found at the end of the string. \n
    $ matches the end of the string.

    `);
};

// validates a phone number
const validatePhone = (string) => {
  regexSummary(regex);

  if (string.match(regex)) {
    console.log(true);
    return true;
  } else {
    console.log(false);
    return false;
  }
};

// handler functions
const submit = () => {
  let phoneNumber = userPhoneNum.value;

  if (validatePhone(phoneNumber)) {
    content.style.display = "flex";
    content__phoneNumber.innerHTML = `The phone number <span id="phoneNumber__span">${phoneNumber}</span> is valid!!!`;
    document.getElementById("phoneNumber__span").style.color = "#49fb35";
    userPhoneNum.value = "";
  } else {
    content.style.display = "flex";
    content__phoneNumber.innerHTML = `The phone number <span id="phoneNumber__span">${phoneNumber}</span> is NOT valid!!!, please enter a valid 10 digit number`;
    document.getElementById("phoneNumber__span").style.color = "#ff073a";
    userPhoneNum.value = "";
  }
};

const clearSubmit = () => {
  content.style.display = "none";
  content__phoneNumber.innerHTML = "";
  console.clear();
};

That’s all! hopefully, you have successfully created a 10-digit phone Number Validation feature in your HTML form. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.