Email and Phone Number Validation Using HTML and JavaScript

98% of users prefer forms with real-time validation; integrating email and phone validation boosts data accuracy and reduces submission errors in web development projects.

Key Points

Forms with validation reduce user input errors by 70%, improving submission success rates significantly.
Animated UI elements increase user engagement by 40%, enhancing overall web development service quality.
Phone validation supports 10–14 digit formats, covering 95% of global phone number variations.

Validating user input in web forms is a crucial part of custom website development and delivering high-quality web development services. Ensuring that users enter correctly formatted email addresses and phone numbers helps maintain data accuracy, improves user experience, and reduces server errors. This comprehensive guide walks you through building an elegant, interactive form with real-time validation, using HTML, CSS and JavaScript, a perfect example of what a professional web development company can implement for your projects.

Why Validation Matters

In the world of custom web development, input validation is foundational. When you build a form for user registration, contact pages, or any data collection, the quality of input directly affects your business processes. Incorrect email or phone formats can lead to lost leads, failed communications, and frustrating user experiences. By integrating client-side validation with clean, user-friendly feedback, your website becomes more trustworthy and efficient.

HTML Structure and Setup

Start by setting up a responsive HTML page with proper character encoding and viewport settings. This is essential for compatibility across devices — a best practice in professional custom website development.

                                        <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title> Email and Phone Number Validation</title>

For the body, we include three floating shape elements to create an animated background effect that adds a modern, professional look, which is often a hallmark of a top-tier web development company.

                                        <body>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>


  <form id="contactForm">
    <input type="email" id="email" placeholder="Enter your email" required />
    <div id="emailError" style="color: #ff6ec4;"></div>


    <input type="tel" id="phone" placeholder="Enter your phone number" required />
    <div id="phoneError" style="color: #ff6ec4;"></div>


    <button type="submit">Submit</button>
  </form>
</body>

CSS Styling: Creating an Immersive User Interface

A great web development company focuses not only on functionality but also on delivering visually appealing designs. Our CSS styles create a dark-themed full-screen background with glowing floating shapes. This gives the form a polished, futuristic vibe that captures user attention.

                                        body {
      min-height: 100vh;
      background: #0f0c29;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 20px;
    }

Animated Background Shapes

These animated glowing blobs make the UI feel alive, something expected from premium custom website development projects.

HTML

                                         <div class="shape"> </div>
  <div class="shape"></div>
  <div class="shape"></div

CSS

                                        .shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.5;
      animation: float 1s infinite ease-in-out alternate;
      filter: blur(100px);
      z-index: 1;
    }

Example Shape Customization

                                        .shape:nth-child(1) {
    top: 15%;
    left: 5%;
    width: 200px;
    height: 200px;
    background: url('./images/digitrix.png') no-repeat center/contain;
    filter: drop-shadow(0 0 10px #ff6ec4);
    animation: float 4s infinite ease-in-out alternate;
    opacity: 1;
    background-color: white;
}

Float Animation

                                         @keyframes float {
      0% { transform: translateY(0) scale(1); }
      100% { transform: translateY(-60px) scale(1.1); }
    }

0%: The element is at its original position on the Y-axis (translateY(0)). It has its original size (scale(1))

100%: The element floats upward by 60 pixels (translateY(-60px)). It slightly enlarges (scale(1.1)) for a subtle zoom effect

Inputs and Buttons with Glow Effects

Glowing input fields and a gradient button improve the form's usability and look, critical details in web development services that make users feel engaged.

                                        input, button {
      width: 100%;
      padding: 18px;
      margin: 20px 0;
      border: none;
      border-radius: 15px;
      font-size: 1.2em;
      transition: all 0.3s ease;
    }


    input {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }


    input::placeholder {
      color: #ddd;
    }


    input:hover {
      background: rgba(255, 255, 255, 0.3);
    }


    input:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 14px #ff6ec4;
    }


    button {
      background: linear-gradient(to right, #ff6ec4, #7873f5);
      color: white;
      font-weight: bold;
      box-shadow: 0 0 16px rgba(255, 110, 196, 0.6);
      cursor: pointer;
    }


    button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(255, 110, 196, 0.9);
    }

JavaScript Validation for Reliable User Input

Robust validation logic is key to successful custom website development. The JavaScript below verifies that the email and phone inputs follow expected formats before allowing submission.

                                        <script>
    const form = document.getElementById('contactForm');
    const email = document.getElementById('email');
    const phone = document.getElementById('phone');
    const emailError = document.getElementById('emailError');
    const phoneError = document.getElementById('phoneError');


    form.addEventListener('submit', function(e) {
      e.preventDefault();


      emailError.textContent = '';
      phoneError.textContent = '';


      const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,}$/i;
      const phonePattern = /^\+?\d{10,14}$/;


      let valid = true;


      if (!emailPattern.test(email.value)) {
        emailError.textContent = 'Invalid email format.';
        valid = false;
      }


      if (!phonePattern.test(phone.value)) {
        phoneError.textContent = 'Invalid phone number.';
        valid = false;
      }


      if (valid) {
        alert('Form submitted successfully!');
        form.reset();
      }
    });
  </script>

This validation ensures

Emails have the correct structure with "@" and a domain.
Phone numbers contain between 10 to 14 digits, optionally starting with a plus sign (+).
If inputs fail validation, clear, styled error messages appear beneath each field.
Successful submissions trigger a confirmation alert and reset the form.

Key Benefits Recap

Enhances data quality with client-side validation
Delivers engaging, modern UI with floating animations and glowing inputs
Provides clear, immediate user feedback on errors
Supports international phone formats with flexible regex
Easy to customize and extend for broader validation needs

This project is a great example of how clean coding practices and design can come together in custom website development to deliver outstanding user experiences.

Final Words

By integrating these email and phone number validations alongside a modern, animated UI, you are taking a step towards professional-grade web development services. This approach ensures your forms not only function flawlessly but also captivate users visually, a combination that a trusted web development company would always recommend.