Hello Reader's! if you are making the html form in which some textbox you only want as taking the digits only. Then in this blog you can learn how to make this digit type validation. Since now most of the website are providing the frontend type validations so will use the Jquery validation for the same.

Lets suppose my html form is like this:-

<form action="http://tajerlee.com/userSite/sell_part3/45" method="post">
     <table class="table " style="background-color: #F0F8FF;">
     
        <tbody><tr>
             
              <td class="firstCol"> Category</td>
              <td class="secondCol">Motors &gt; Trucks </td>
        </tr>

                    <tr>
               <td class="firstCol">
                Description<span class="error"> *</span>               </td>
                <td id="attribute142"><textarea class="textarea" rows="5" cols="50" maxlength="200" name="description" placeholder="e.g." condition,="" other="" features="">e.g. condition, other features</textarea></td>
          </tr>
                        <tr>
               <td class="firstCol">
                number of owners               </td>
                <td id="attribute143"><select name="number_of_owners" required="">undefined<option value="Don't Know">Don't Know</option><option value="New">New</option><option value="1 Owners">1 Owners</option><option value="2 Owners">2 Owners</option><option value="3 Owners">3 Owners</option><option value="5+ Owners">5+ Owners</option></select></td>
          </tr>
                        <tr>
               <td class="firstCol">
                Kilometres<span class="error"> *</span>               </td>
                <td id="attribute147"><input maxlength="50" type="text" name ="kilometer" name="kilometres" placeholder="Enter Kilometers in KM" required=""></td>
          </tr>
                        <tr>
               <td class="firstCol">
                Year               </td>
                <td id="attribute152"><input maxlength="50" type="text" class="year_validation" name="year" placeholder="Enter Year"></td>
          </tr>
                        <tr>
               <td class="firstCol">
                Engine size               </td>
                <td id="attribute153"><input maxlength="50" type="text" name="engine_size" placeholder="Enter Engine size in cc"></td>
          </tr>
                        <tr>
               <td class="firstCol">
                Transmission               </td>
                <td id="attribute154"><select name="transmission" required="">undefined<option value="I don't know">I don't know</option><option value="Manual">Manual</option><option value="Automatic">Automatic</option><option value="Tiptronic">Tiptronic</option></select></td>
          </tr>
                        <tr>
               <td class="firstCol">
                Mize inspection               </td>
                <td id="attribute166"><input type="checkbox" name="mize_inspection[]" value="Yes"> Yes<br></td>
          </tr>
                        <tr>
               <td class="firstCol">
                WOF expires               </td>
                <td id="attribute167"><input maxlength="50" type="text" name="wof_expires" id="datepicker_attributes" placeholder="Enter Enter date" class="hasDatepicker"></td>
          </tr>
                      </tbody></table>
     
     <input type="hidden" value="45" name="category_list">
     
    
        <p><input type="submit" value="submit" class="btn btn-default nxtBtnEdit"></p>
       </form>

So you can see there is the text for entering the kilometer by user. And it's design so that only digits will be typed in it. It's name is "kilometer" and id is same "kilometer".

Now we will create the Jquery for the validation part. And the script will go like this:- 

 $(document).ready(function () {
  //called when key is pressed in textbox
  $("#kilometer").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Please input digits only").show().fadeOut("slow");
               return false;
    }
   });

Now every time the user hit the key in this text box it will pass through this function. If it's not a digit it will be popup an error and letter will not print in the box, but if it's an integer the it will print inside the textbox.

Output is as seen in the screenshot below:-