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

Question

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>

Not sure if it's relevant but you have eles instead of else after your unitprice check — JConstantine
– JConstantine, Commented Nov 13, 2014 at 6:16

score 1 · Accepted Answer · 2014-11-13 07:19:03Z

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">

Oh @Arvind How can I do it i want to validate 4 html element <input type="text" class="one"/> <input type="text" class="two"/> <input type="text" class="tree"/> <input type="text" class="forth"/>
Yes I want to create a function to validate all input element

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related