CODEWITHSUNDEEP
javascriptjqueryhtml
HEEN
HEEN

Reputation: 4721

javascript alert is firing continously even after clicking OK

I have a textbox where I want a user to add integer numbers and the number of digits should not be less than 10.

The issue here is that the alert message is continuously firing even after clicking OK. Please suggest what is wrong with the code. Also suggest if there any other good methods to implement this

function checkLength(el) {
  if (el.value.length != 10 || el.getAttribute('data-should-alert') === 'false') {
    alert("Minimum 10 numbers are accepted");
    el.setAttribute('data-should-alert', 'false');
    el.focus();
  } else {
    el.setAttribute('data-should-alert', 'true');
  }
}

function IsNumeric4(e) {
  var keyCode = e.which ? e.which : e.keyCode
  var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
  document.getElementById("error4").style.display = ret ? "none" : "inline";
  return ret;
}
<div class="form-group">
  <label for="">Stores / Sites  Asst. Manager Mob</label>
  <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />
  <span id="error4" style="color: Red; display: none">* Only numbers allowed (0 - 9)</span>
</div>

Upvotes: 1

Views: 1271

Answers (3)

Terry Wei
Terry Wei

Reputation: 1531

Because alert will trigger blur again.

setTimeout gives you a tricky way to make .focus() call after alert:

function checkLength(el) {
// this may cause once alert, it will always alert
  if (el.value.length != 10/* || el.getAttribute('data-should-alert') === 'false'*/) {
    alert("Minimum 10 numbers are accepted");
    el.setAttribute('data-should-alert', 'false');
    // set this
    setTimeout(function(){
      el.focus();
    }, 10);
  } else {
    el.setAttribute('data-should-alert', 'true');
  }
}

function IsNumeric4(e) {
  var keyCode = e.which ? e.which : e.keyCode
  var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
  document.getElementById("error4").style.display = ret ? "none" : "inline";
  return ret;
}
<div class="form-group">
  <label for="">Stores / Sites  Asst. Manager Mob</label>
  <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />
  <span id="error4" style="color: Red; display: none">* Only numbers allowed (0 - 9)</span>
</div>

Upvotes: 0

mostafa tourad
mostafa tourad

Reputation: 4388

The problem is that the event onblur always fired when the element loses focus

so one solution is to change that event to onchange event instead of onblur 

function checkLength(el) {
  if (el.value.length != 10 || el.getAttribute('data-should-alert') === 'false') {
    alert("Minimum 10 numbers are accepted");
    el.setAttribute('data-should-alert', 'false');
    el.focus();
  } else {
    el.setAttribute('data-should-alert', 'true');
  }
}

function IsNumeric4(e) {
  var keyCode = e.which ? e.which : e.keyCode
  var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
  document.getElementById("error4").style.display = ret ? "none" : "inline";
  return ret;
}
<div class="form-group">
  <label for="">Stores / Sites  Asst. Manager Mob</label>
  <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onchange="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />
  <span id="error4" style="color: Red; display: none">* Only numbers allowed (0 - 9)</span>
</div>

Upvotes: 3

A. Llorente
A. Llorente

Reputation: 1162

I think the problem is that you are focusing after the alert is shown

Upvotes: 0

Related Questions