Setting min length in input text is giving repetitive alert message

Question

I want a user to add minimum 10 characters into the html text. So for that I have set a validation on onblur of the textbox. Below is the html and its JS code

HTML

<input type="text" class="form-control" id="txtStoreSiteAsstMangrMob"  maxlength="10" onblur="checkLength(this)"  onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />

JavaScript

function checkLength(el) {    
if (el.value.length != 10) {
    alert("Minimum 10 numbers are accepted");        
}  }

The problem here is that the validation is firing properly but the message is showing repetitively, even after clicking OK also.

So why is it happening like this?

it works. https://codepen.io/jacobgoh101/pen/QromYV?editors=1111 . so it's caused by something that you haven't show us — Jacob Goh, May 22 '18 at 09:15
@JacobGoh: I have shown everything, it works even at my side also. But the alert is firing repetitively.. — Nad, May 22 '18 at 09:20
For me its working fine. Maybe the issue is something else which you have not mentioned here. — Harsh Jaswal, May 22 '18 at 09:35
And also the condition inside `if` statement should be like `el.value.length < 10` not like `el.value.length != 10` — Harsh Jaswal, May 22 '18 at 09:38
@HarshJaswal: can u tell me how should I focus after alert in my code ? — Nad, May 22 '18 at 09:54
@JacobGoh: I guess setting it focus after alert is causing the issue.. here is what I wrote for focus `el.focus();` — Nad, May 22 '18 at 09:56
yes without focus its working perfectly fine..SO now what should I do ? — Nad, May 22 '18 at 10:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171531/discussion-between-harsh-jaswal-and-bnn). — Harsh Jaswal, May 22 '18 at 10:08

score 1 · Answer 1 · answered May 22 '18 at 10:47

Try below fiddle demo and it will clear you requirement:

HTML:

 <input type='text' id='text'/>

JS:

function textLength(value){
  var maxLength = 10;
  if(value.length > maxLength) return false;
  return true;
}

document.getElementById('text').onkeyup = function(){
 if(!textLength(this.value)) alert('text is too long!');
}

Setting min length in input text is giving repetitive alert message

I Found here:

Counting input chars - use onkeyup or onkeydown?

score 0 · Answer 2 · edited May 22 '18 at 09:52

0

you use el.value.length != 10, that means if length greater then 10 then message will show if less than 10 then also message will show.

In your code if the input have exactly length 10 message then message will not show.

But you want check if length < 10 then show message and if more then 10 then don't show anything.

So I think better to use :

el.value.length < 10

edited May 22 '18 at 09:52

Yogesh Patel

818
2
12
26

answered May 22 '18 at 09:21

Pouria Parhami

182
1
2
13

score 0 · Answer 3 · edited May 22 '18 at 10:05

function checkLength(el) {
  if (el.value.length != 10) {
    alert("Minimum 10 numbers are accepted");
  }
}

<html>

<body>
  <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />
</body>

</html>

your code is working fine for me.. please check again.. As per my understanding, if we use input field validations using onBlur function, focus may trouble you with this type of problems..

score 0 · Answer 4 · 2018-05-22T09:48:02.270

0

Using onblur event handler on more than one inputs, can result the same thing, result may vary browser to browser.

Option 1: Avoid using js alert() with onblur.

Option 2: Put basic validations on form submit instead of input blur.

edited May 22 '18 at 09:48

answered May 22 '18 at 09:38

`Using onblur event handler on more than one inputs, can result the same thing.` I am just showing you that this point is invalid – Jacob Goh May 22 '18 at 09:46

Jacob Goh · Answer 5 · 2018-05-22T10:20:05.613

0

here's a way to make it work when you want to keep re-focusing it

demo https://codepen.io/jacobgoh101/pen/PeLaRw?editors=1011

save the state in the elem's data attribute, for e.g. data-should-alert, set it to false after alerting once so that the function can decide where or not to alert again. set it to true again once the user start typing something.

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

function handleKeydown(el) {
    el.setAttribute('data-should-alert', 'true');
}

edited May 22 '18 at 10:20

answered May 22 '18 at 10:07

Jacob Goh

19,800
5
53
73

@BNN in that case, a global variable is not suitable. the state can be stored inside each element's data attribute. answer updated – Jacob Goh May 22 '18 at 10:21
1

Actually its surprising, because `alert` is synchronous so script waits until the alert dialog to be closed to keep on. So in that case `el.focus()` should work only after the user clicks on the ok button of alert box. – Harsh Jaswal May 22 '18 at 10:29
@HarshJaswal I think it's still synchronous. But something is causing the input to blur immediately after focus. I wonder what it could be – Jacob Goh May 22 '18 at 10:45
It is behaving like a `recursion`, which turned into a never ending loop. focus...blur...focus..blur and so on.... – Harsh Jaswal May 22 '18 at 10:47

Setting min length in input text is giving repetitive alert message

5 Answers5