Phone number validation using pattern in HTML5

wp nav menu1
 <!-- html form tag -->
  <form>
    <label>Phone Number Format (xxx-xxx-xxx)</label>
    <!-- html input type=tel for phone number which contain a pattern -->
    <input type="tel"
           name="phone_number"
           id="phone_number"
           pattern="^\d{3}-\d{3}-\d{4}$"
           required="required"
          />
          
    <!-- html input type=submit for submit a form --> 
    <input type="submit" />
    
  </form>

Using Regex for 10 Digit

<!-- html form tag -->
  <form>
    <label>Phone Number Format (xxxxxxxxx)</label>
    <!-- html input type=tel for phone number which contain a pattern -->
    <input type="tel"
           name="phone_number"
           id="phone_number"
           pattern="^\d{10}$"
           required="required"
          />
          
    <!-- html input type=submit for submit a form --> 
    <input type="submit" />
    
  </form>

Using Simple Mobile Number Validation Regex in Pattern [789][0-9]{9}

 <!-- html form tag -->
  <form>
    <label>Phone Number Format ((7|8|9)xxxxxxxx)</label>
    <!-- html input type=tel for phone number which contain a pattern -->
    <input type="tel"
           name="phone_number"
           id="phone_number"
           pattern="[789][0-9]{9}"
           required="required"
          />
          
    <!-- html input type=submit for submit a form --> 
    <input type="submit" />
    
  </form>

Leave a Reply