CODEWITHSUNDEEP
javascript
hengsopheak
hengsopheak

Reputation: 401

How to use javascript for html form validation to valid number only?

How to validate input form using Javascript to stretch user don't insert any value into input form element. Object: 1, I want user input any number value only if have some character or special character it will show errors 2, and if user let input element value as empty it also alert to user

below is my javascript code

<script type="text/javascript"> 
     $(document).ready(function(){
     $('.quantity, .unitprice').on('keyup', function(e){
     var errors = array[];
     var quantity = document.getElementsByClassName('.quantity').val(); 
     var unitprice = document.getElementsByClassName('.unitprice').val();

     if(quantity== ""){
         errors = "quantity is empty";
    }
       if(unitprice== ""){
             errors = "unitprice is empty";
        }eles{
         if(errors){
             forearch(errors as errors){
                 alert(errors);
                    }
            }else{
                 calculate();
             }
        }
    });
      function calculate(){


             var qty = parseFloat( $('.quantity').val() ), 
             unit = parseFloat( $('.unitprice').val() ); 
             if( isNaN(qty) || isNaN(unit) ) {
             $('.result').text('');
              return false;
              }
                var total = qty * unit; 
                $('.result').text(total);

         }
         });

        </script>

And here is Html form 

<td><?php echo form_input('quantity','',' class="quantity form-control"')?></td>
<td><?php echo form_input('unitprice','',' class="unitprice form-control"')?></td>
<td><label class="result"></label>$</td>

Upvotes: 0

Views: 371

Answers (1)

user2575725
user2575725

Reputation:

Try this is example:

$(function() {
  $(".quantity, .unit").on('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '');//<-- replace all other than digits
  }).on('focusout', function() {
    if (!this.value) {//<-- if empty
      alert('Required !');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="quantity" placeholder="Quantity">
<input type="text" class="unit" placeholder="Unit">

EDIT: for multiple input using common class

$(function() {
  $(".digits").on('input', function() {//<-- common for all
    this.value = this.value.replace(/[^0-9]/g, ''); //<-- replace all other than digits
  }).on('focusout', function() {
    if (!this.value) { //<-- if empty
      alert('Required !');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="one digits" placeholder="One">
<input type="text" class="two digits" placeholder="Two">
<input type="text" class="three digits" placeholder="Three">
<input type="text" class="four digits" placeholder="Four">

For multiple input without class(not recommended, unless you have this input on the entire page)

$(function() {
  $("input:text").on('input', function() {//<-- common for all
    this.value = this.value.replace(/[^0-9]/g, ''); //<-- replace all other than digits
  }).on('focusout', function() {
    if (!this.value) { //<-- if empty
      alert('Required !');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="One">
<input type="text" placeholder="Two">
<input type="text" placeholder="Three">
<input type="text" placeholder="Four">

Upvotes: 1

Related Questions