Number validation javascript doesn't work

Question

my telephone number validation doesn't work and I don't know why. Submit should be active when number length is 9 or 10,in other case submit should be disabled.Here's the code

HTML body:

<body>
<input type="number" name="number-189" value="" class="example1" id="numertel" min="500000000" max="900000000" aria-invalid="false">
<input type="submit" value="Send" class="example" id="przycisk">
    <script src="script.js"></script>
</body>

JS

var numertell = document.getElementById("numertel");
var numerlength =  numertell.value.length;
if(numerlength==10 && numerlength==9)
  document.getElementById("przycisk").disabled=false;
else
  document.getElementById("przycisk").disabled=true;

What "doesn't work" about it? How is this code even invoked as the value changes? — David
– David, Commented Nov 2, 2017 at 11:42
if(numerlength==10 && numerlength==9) will always be false. the length can't be 9 AND 10 in the same time. Change it to || — sheplu
– sheplu, Commented Nov 2, 2017 at 11:43
That's right,my obvious bad,but id doesn't work too.Submit is always disabled — Mi Kcid
– Mi Kcid, Commented Nov 2, 2017 at 11:48

gurvinder372 · Accepted Answer · 2017-11-02 11:56:40Z

7

Submit should be active when number length is 9 or 10,in other case submit should be disabled

Your problem is this line

if(numerlength==10 && numerlength==9)

replace && with || since numerlength can't be 9 and 10 at the same time. Check this doc to know more about logical operators.

if( numerlength== 10 || numerlength==9 )

Edit

You need to invoke the code share above when the value of textbox changes. I have shared an example with keyup event.

Demo

document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  //console.log( numerlength );
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});

<input type="number" name="number-189" value="" class="example1" id="numertel" min="500000000" max="900000000" aria-invalid="false">
<input type="submit" value="Send" class="example" id="przycisk">

edited Nov 2, 2017 at 11:56

answered Nov 2, 2017 at 11:43

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Bunting Over a year ago

Maybe explain the difference between && and ||? Other than that great answer.

Mi Kcid Over a year ago

Oh,that's right,but id doesn't work too.Submit is always disabled

gurvinder372 Over a year ago

@MiKcid I have added a demo.

Nandhi Kumar · Accepted Answer · 2017-11-02 11:49:37Z

0

Try this....

function check_value()
{
var numertell = document.getElementById("numertel");
var numerlength =  numertell.value.length;
if(numerlength == 10 || numerlength ==9)
  document.getElementById("przycisk").disabled=false;
else
  document.getElementById("przycisk").disabled=true;
 }

<body>
<input type="number" name="number-189" value="" class="example1" id="numertel" min="500000000" max="9000000000" aria-invalid="false" onblur = "check_value();">
<input type="submit" value="Send" class="example" id="przycisk">
    <script src="script.js"></script>
</body>

answered Nov 2, 2017 at 11:49

Nandhi Kumar

3531 silver badge11 bronze badges

2 Comments

Mi Kcid Over a year ago

Thank you,that's working,but i'm very curious-can you tell me why my code isn't working?

Nandhi Kumar Over a year ago

the condition of numberlength should be "or" i.e "||"

code4maniaa · Accepted Answer · 2017-11-02 11:58:57Z

0

html >>>

<body>
<input type="number" name="number-189" value="1234" class="example1" id="numertel" min="500000000" max="900000000" aria-invalid="false" onkeydown="myFunction()">
<input type="submit" value="Send" class="example" id="przycisk" >
    <script src="script.js"></script>
</body>

javascript >>>

$(document).ready(function(){
 myFunction();
});
function myFunction() {
     var numertell = document.getElementById("numertel");
  var numerlength =  numertell.value.length;
  if(numerlength==10 || numerlength==9)
    document.getElementById("przycisk").disabled=false;
  else
   document.getElementById("przycisk").disabled=true;
}

answered Nov 2, 2017 at 11:58

code4maniaa

11 bronze badge

1 Comment

Josh Mein Over a year ago

There is no indication from the user that they are using jQuery so there is no point in using jQuery's document ready when there are javascript only options.

Andrija Ćeranić · Accepted Answer · 2017-11-02 12:03:01Z

You should also put that condition inside input event, and assign new numertell value inside that event, like this:

var numertell = document.getElementById("numertel");
var numerlength = numertell.value.length;
if (numerlength === 10 || numerlength === 9)
  document.getElementById("przycisk").disabled = false;
else
  document.getElementById("przycisk").disabled = true;

numertell.addEventListener('input', function(evt) {
  numerlength = numertell.value.length;

  if (numerlength === 10 || numerlength === 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});

<body>
  <input type="number" name="number-189" value="" class="example1" id="numertel" min="500000000" max="900000000" aria-invalid="false">
  <input type="submit" value="Send" class="example" id="przycisk">
  <script src="script.js"></script>
</body>

Nimish Gupta · Accepted Answer · 2017-11-02 12:49:47Z

0

Please try

if(numerlength === 10 || numerlength === 9).

|| is an operator for 'OR' operation in Javascript. Also for comparison should use === rather than ==.

edited Nov 2, 2017 at 12:49

Nimish Gupta

3,1851 gold badge17 silver badges21 bronze badges

answered Nov 2, 2017 at 12:03

qingqing

12 bronze badges

Collectives™ on Stack Overflow

Number validation javascript doesn't work

5 Answers 5

3 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related