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;
5 answers
solution1
7 ACCPTED 2017-11-02 11:43:18
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">
solution2
0 2017-11-02 11:49:37
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>
solution3
0 2017-11-02 11:56:08
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>
solution4
0 2017-11-02 11:58:57
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;
}
solution5
0 2017-11-02 12:03:54
Please try
if(numerlength === 10 || numerlength === 9) .
|| is an operator for 'OR' operation in Javascript. Also for comparison should use === rather than == .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.