10 Digit Phone Number Validation in HTML

10 Digit Phone Number Validation in HTML
Code Snippet:Phone Number Validation
Author: LearnMern
Published: January 9, 2024
Last Updated: January 22, 2024
Downloads: 1,720
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X