Basic input manipulation and validation with jQuery

In this article we'll create a text input field and set a couple of rules.

The first rule is that the first character must be 0 and If it's not, we'll change whatever the character is to 0.

The second rule is that the number must be 10 digits long and we'll display a count as the user types.

What we won't cover in this article is ensuring that the user only types in numbers.

As always, whenever you intend to use jQuery in your project please make sure the library is included. Including jQuery can be as simple as pasting the integration code from the CDN like this:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

The HTML
 

 <!-- The HTML form input -->        
     <input id="number" type="text" placeholder="Please enter a 10 digit number">
     
      <!-- Count the number of digits remaining -->  
     <div id="remaining">Remaining: <span id="count"></span></div>

And the javascript
 

   <script type="text/javascript">

    //Select the 3 id's from the html elements and assign them to variables
    var remaining = $("#remaining"), 
        number = $("#number"),
        count = $("#count");

    //Create a global variable to use for the entered value
    var input;

    //Hide the count div
    remaining.hide();

    //Listen for keypresses as the user types on the keyboard
    number.on('keypress keydown keyup',function(e){

        //Show the count as the user starts typing
        remaining.show();
    
       //The count starts from 10, going down
       count.text(10 - number.val().length);

        //Dont allow spaces by ignoring key number 32 which is the space bar
      if (e.which == 32)
            return false;     
            
            //Use the input variable to store the digits        
            input = number.val();

            //This is one way to check the first character            
            if (number.val().substring(0,1) != 0) {    
                
                //Replace the first character with 0 if it's not 0
               input = input.replace(number.val().substring(0,1), 0);
            }

             //Show the number that's been manipulated                  
             number.val(input);

             //Check if the number is greater than 9                 
                if(number.val().length > 9 

                //And that it starts with 0 - this is another way to target the first character
                && number.val().charAt(0) == 0 )
                        {

                   //We have reached 10 and hide the count
                   remaining.hide();             
                  
                }
                
                if (number.val().length > 10 || number.val().length < 10) {
                      
                 //If the user continues typing after 10 digits we show the count
                 remaining.show();   
                }           
         }); 
        
        </script>  

Demo

Remaining:

Add new comment

The content of this field is kept private and will not be shown publicly.
Target Image