title: HTML input validation pattern for telephone number [0-9]{10} starting with zero. Keeping it consistent with existing patterns
body: <p>I am using an HTML form with validation patterns <a href="https://www.sitepoint.com/instant-validation/" rel="nofollow noreferrer">from this article</a> but I am unsure how to keep the same (style of) validation pattern for a telephone number of 10 characters starting with 0?</p>
  
  <p>I simply have <code>"[0-9]{10}"</code> atm.</p>
  
  <p>This will take care of the preceding 0 right? <code>"0([0-9]){9}"</code></p>
  
  <p>Do I need the other beginning <code>"^(([-\w\d]+)"</code> &amp; end stuff <code>")$"</code> from the other inputs to keep the patterns uniform for all inputs or is this just overcomplicating the requirement?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//sitepoint.com/instant-validation
  //add event construct for modern browsers or IE
  //which fires the callback with a pre-converted target reference
  function addEvent(node, type, callback) {
    if (node.addEventListener) {
      node.addEventListener(
        type,
        function(e) {
          callback(e, e.target);
        },
        false
      );
    } else if (node.attachEvent) {
      node.attachEvent("on" + type, function(e) {
        callback(e, e.srcElement);
      });
    }
  }
  
  //identify whether a field should be validated
  //ie. true if the field is neither readonly nor disabled,
  //and has either "pattern", "required" or "aria-invalid"
  function shouldBeValidated(field) {
    return (
      !(field.getAttribute("readonly") || field.readonly) &amp;&amp;
      !(field.getAttribute("disabled") || field.disabled) &amp;&amp;
      (field.getAttribute("pattern") || field.getAttribute("required"))
    );
  }
  
  //field testing and validation function
  function instantValidation(field) {
    //if the field should be validated
    if (shouldBeValidated(field)) {
      //the field is invalid if:
      //it's required but the value is empty
      //it has a pattern but the (non-empty) value doesn't pass
      var invalid =
        (field.getAttribute("required") &amp;&amp; !field.value) ||
        (field.getAttribute("pattern") &amp;&amp;
          field.value &amp;&amp;
          !new RegExp(field.getAttribute("pattern")).test(field.value));
  
      //add or remove the attribute is indicated by
      //the invalid flag and the current attribute state
      if (!invalid &amp;&amp; field.getAttribute("aria-invalid")) {
        field.removeAttribute("aria-invalid");
      } else if (invalid &amp;&amp; !field.getAttribute("aria-invalid")) {
        field.setAttribute("aria-invalid", "true");
      }
    }
  }
  
  //now bind a delegated change event
  //== THIS FAILS IN INTERNET EXPLORER &lt;= 8 ==//
  //addEvent(document, 'change', function(e, target)
  //{
  // instantValidation(target);
  //});
  
  //now bind a change event to each applicable for field
  var fields = [
    document.getElementsByTagName("input"),
    document.getElementsByTagName("textarea")
  ];
  for (var a = fields.length, i = 0; i &lt; a; i++) {
    for (var b = fields[i].length, j = 0; j &lt; b; j++) {
      addEvent(fields[i][j], "change", function(e, target) {
        instantValidation(target);
      });
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&amp;display=swap');
  
  *,*:before,*:after {
      box-sizing: border-box;
  }
  
  body {
      font-family: 'Titillium Web', sans-serif;
      font-size: 20px;
      line-height: 1.4;
      color: var(--color-woodsmoke);
  }
  
  :root {
  
      --color-woodsmoke: #161B1E;
  }
  
  .container {
      width:600px;
      margin: 200px auto 0;
  
  }
  
  .container * {
      transition: all 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
      /*transition: all 220ms cubic-bezier(0.19, 1, 0.22, 1) 0s;*/
  }
  
  #contactForm fieldset {
      border: none;
  }
  
  .form-control {
      width: 100%;
      display: block;
      padding: .5rem 0;
      font-size: 18px;
      line-height: 1.25;
      color: var(--color-woodsmoke);
      -webkit-tap-highlight-color: transparent;
      border: none;
      border-bottom: 1px solid #767676;
      background: 
      url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"&gt;&lt;path d="M7.9 17.1l-5.5-5.5-1.8 1.8L8 20.8 23.5 5.1l-1.8-1.8L7.9 17.1z" fill="%234eb239"/&gt;&lt;/svg&gt;') no-repeat right -35px / 24px 24px;
      /*transition: none;*/
  }
  
  .form-control:focus {
      color: var(--color-woodsmoke);
      /*background: none;*/
      border-color: transparent;
      outline: 0;
  }
  
  input[aria-invalid="true"].form-control,
  textarea[aria-invalid="true"].form-control {
      border-color: red;
  }
  
  
  
  
  .form-group {
    position: relative;
    margin-bottom: 2.5rem;
  }
  
  .form-control-placeholder {
    position: absolute;
    top: 0;
    color: #767676;
  }
  
  .form-control:focus + .form-control-placeholder,
  .form-control:valid + .form-control-placeholder {
    font-size: 70%;
    transform: translate3d(0, -100%, 0);
  }
  
  input[aria-invalid="true"].form-control + .form-control-placeholder, 
  textarea[aria-invalid="true"].form-control + .form-control-placeholder {
      font-size: 70%;
      transform: translate3d(0, -100%, 0);
      color: red;
  }
  
  
  
  .form-control:focus + .form-control-placeholder {
      color: #115293;
  }
  
  .focus-border {
      width: 100%;
      height: 2px;
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0; 
      z-index: 2;
      transform: scaleX(0);
      transition: transform 280ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
      background-color: #115293;
  }
  
  .form-control:focus + .form-control-placeholder + .focus-border {
      transform: scaleX(1);
  }
  
  .form-control:valid:not([aria-invalid="true"]) {
      border-color: #57b846;
      /*background: blue;*/
      background-position: right center;
  }
  
  textarea.form-control:valid:not([aria-invalid="true"]) {
      background-position: right 7px;
  }
  
  
  
  /*MOZ FIX*/
  :not(output):-moz-ui-invalid {
      box-shadow: none;
  }
  
  input:invalid {
      box-shadow: none;
  }
  
  /*CHROME FIX*/
  @-webkit-keyframes autofill {
      to {
          color: var(--color-woodsmoke);
          background: transparent;
      }
  }
  
  input:-webkit-autofill {
      -webkit-animation-name: autofill;
      -webkit-animation-fill-mode: both;
  }
  
  /*
  input:-internal-autofill-selected {
      background-color: red !important;
      background-image: inherit !important;
      color: var(--color-woodsmoke) !important;
  }
  */
  
  input:-webkit-autofill {
      -webkit-text-fill-color: var(--color-woodsmoke);
  }
  input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--color-woodsmoke);
  }
  
  
  /*TEXTAREA*/
  #txtMessage {
      resize: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
  
  
  &lt;h4 class="align-center white text-shadow"&gt;Get in touch&lt;/h4&gt;
  &lt;form id="contactForm" method="post" action="php/mail.php"&gt;
      &lt;fieldset&gt;
          &lt;div class="form-group"&gt;
              &lt;input name="txtName" id="txtName" class="form-control" value="" aria-required="true" pattern="^([- \w\d\u00c0-\u024f]+)$" title="Your name" type="text" spellcheck="false" maxlength="30" required autofocus&gt;
              &lt;label class="form-control-placeholder" for="txtName"&gt;Name&lt;/label&gt;
              &lt;span class="focus-border"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;    
              &lt;input name="txtEmail" id="txtEmail" class="form-control" value="" aria-required="true" pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" title="Your email address" type="email" spellcheck="false" maxlength="30" required&gt;
              &lt;label class="form-control-placeholder" for="txtEmail"&gt;Email&lt;/label&gt;
              &lt;span class="focus-border"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="[0-9]{10}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required&gt;
              &lt;label class="form-control-placeholder" for="txtPhone"&gt;Telephone&lt;/label&gt;
              &lt;span class="focus-border"&gt;&lt;/span&gt;
          &lt;/div&gt;       
          &lt;div class="form-group"&gt;
              &lt;textarea name="txtMessage" id="txtMessage" class="form-control" aria-required="true" cols="40" rows="7" spellcheck="true" title="Your enquiry" required&gt;&lt;/textarea&gt;
              &lt;label class="form-control-placeholder" for="txtMessage"&gt;Enquiry&lt;/label&gt;
              &lt;span class="focus-border"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;button name="btnSubmit" id="btnSubmit" class="button primary" type="submit"&gt;Submit&lt;/button&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>