The code below ensures that my entry is only numeric with 2 decimal.

        <input type="text" maxlength="10" name="numPrice" value="1.00">


        $("input[name='numPrice']").keyup(function(){       
            if(!(/^\d+(\.{0,1}\d{0,2})?$/.test(this.value)) ){
                this.value = this.value.substring(0, this.value.length - 1);
            }
            return this;
        });

However values such as 1&.0 is not rejected by the code above. Did I miss something?

Recommended Answers

All 5 Replies

This works:

<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {

    $("input[name='numPrice']").keypress(function(event) {
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
        ((event.which < 48 || event.which > 57) &&
          (event.which != 0 && event.which != 8))) {
        event.preventDefault();
      }

      var text = $(this).val();

      if ((text.indexOf('.') != -1) &&
        (text.substring(text.indexOf('.')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
        event.preventDefault();
      }
    });

})
</script>  
</HEAD>   
<BODY>
 <input type="text" name="numPrice" />
</BODY>
</HTML>

However if I have two input with two different name but require the validation above then there will be code repetition.

I manage to separate the code into a function as below:

<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {

    function validateNumeric(event, value){
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
            ((event.which < 48 || event.which > 57) &&
              (event.which != 0 && event.which != 8))) {
            event.preventDefault();
        }
    }

    function precisionDecimal(){

    }

    $("input[name='numPrice']").keypress(function(event) {

          validateNumeric(event, $(this).val());

          var text = $(this).val();

          if ((text.indexOf('.') != -1) &&
            (text.substring(text.indexOf('.')).length > 2) &&
            (event.which != 0 && event.which != 8) &&
            ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
          }
    });

})
</script>  
</HEAD>   
<BODY>
 <input type="text" name="numPrice" />
</BODY>
</HTML>

However when I attempt to place the following code

if ((text.indexOf('.') != -1) &&
    (text.substring(text.indexOf('.')).length > 2) &&
    (event.which != 0 && event.which != 8) &&
    ($(this)[0].selectionStart >= text.length - 2)) {
    event.preventDefault();
}

into the preciseDecimal function and call it during a keypress event it doesn't work in a sence that I can enter more than 2 decimal value.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.