Donate Poor Children Suffer From in Education

How to set a maxLength of number input with jQuery

Hello guys, in this article, we will learn how to validate input mobile length that cannot be entered more than 10 digit and cannot be entered string value in the input box. Let's see how to validate input box value and set the maxlength in the input box.

Example:-

<!DOCTYPE html>
<html>
<body>
<h2>The input maxlength attribute </h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
  <label for="mobile">Mobile Number:</label>
  <input type="number" id="mobile" name="mobile" >
  <span id="mobileError"></span>
  <br><br>
</form>
<script>
$('#mobile').on("input", function () { 
    if(this.value.length > 10){

        $('#mobileError').html('<span style="color:red">You cannot be enter more then 10 digit.</span>');

        this.value = this.value.slice(0,10);
        return false;
    }else{
        $('#mobileError').html('');
        return true;
    }  

});

</script>
</body>
</html>

Conclusion-:

In this article we have learned about how to set maxLength in the input box. After that we have learned how to validate input boxes that cannot accept values more than 10 digits.