title: HTML - jQuery blur( function() is triggered on entry and then loops
body: <p>I am trying to validate two telephone numbers. The first telephone number validation works fine; however, if the first telephone number is invalid and I then go the the second telephone number then the second telephone number validation is triggered, before I have entered any data, and I have a loop "Invalid phone number 1c" until I close the tab.</p>
  
  <p>For instance I enter "99999999" in the first telephone number then tab. The message "Please use Area Code for landline numbers" is displayed and then a continuous loop of "Invalid phone number 1c" is displayed.</p>
  
  <p>If I enter an invalid telephone number and then go to another field, other than the second telephone number, I just get an error message once (e.g., enter "99999999" in the first telephone number then click on another text entry field, e.g., State).</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>$("#telephone1").blur(function() {
    validatePhoneNumber($(this).val(), this.id);
  });
  
  $("#telephone2").blur(function() {
    validatePhoneNumber($(this).val(), this.id);
  });
  
  function validatePhoneNumber(phone_number, id) {
    var formatted = "";
    //remove all non-digits
    phone_number = phone_number.replace(/\D/g, '');
    //if number starts with 61, replace 61 with 0
    if (phone_number.match(/^61/)) {
      phone_number = "0" + phone_number.slice(2);
    }
  
    if (phone_number.match(/^04/)) {
      if (phone_number.length === 10) {
        var formatted = phone_number.replace(/(\d{4})(\d{3})(\d{3})/g, "$1 $2 $3");
      } else {
        alert('Invalid phone number 1a');
      }
    } else if (phone_number.match(/^02|03|07|08/)) {
      if (phone_number.length === 10) {
        var formatted = phone_number.replace(/(\d{2})(\d{4})(\d{4})/g, "($1) $2 $3");
      } else {
        alert('Invalid phone number 1b');
      }
    } else if (phone_number.length === 8) {
      alert('Please use Area Code for landline numbers');
    } else {
      alert('Invalid phone number 1c');
    }
    //update
    $('#' + id).val(formatted);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="form-group row"&gt;
    &lt;label for="telephone1" class="text-right col-lg-2 col-md-2 col-sm-2 col-xs-2 col-form-label"&gt;Telephone:&lt;/label&gt;
    &lt;div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
      &lt;input type="text" id="telephone1" name="telephone1" placeholder="Telephone 1"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
    &lt;label for="telephone2" class="text-right col-lg-2 col-md-2 col-sm-2 col-xs-2 col-form-label"&gt;&lt;/label&gt;
    &lt;div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
      &lt;input type="text" id="telephone2" name="telephone2" placeholder="Telephone 2"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>