CODEWITHSUNDEEP
javascriptjquery
QKWS
QKWS

Reputation: 1109

How to validate a currency input

I am creating a form, and that includes salary, I need to check if the input value for salary is a valid currency and has two decimal places because that is what the database accepts. If the input for salary has alphabets (a-z) or symbols (!@#%^&*() except for the $ or other currency sign) it should change the border color.

example:

  10000.00
  25846.00
  213464.12

code:

function isNumeric(){
   var numeric = document.getElementById("txtSalary").value;
   var regex  = /^\d+(?:\.\d{0,2})$/;
   if (regex.test(numeric)){
     $("#txtSalary").css("border-color","#FFFFFF");
   }else{
      $("#txtSalary").css("border-color","#FF0000");
   }
 }

This is already working as I wanted too, but the problem is I got 6 more input boxes that needs this kind of validation. How can I make that function, when called change the border-color of the specific selector and will return false is the value is not numeric something like:

isNumeric(selector);

function isNumeric(selector){
    var regex  = /^\d+(?:\.\d{0,2})$/;
     $(selector).filter(function() {
        return (regex.test(this.value));
     }).css("border-color","#FF0000");
    }

Thanks!

Upvotes: 2

Views: 28427

Answers (9)

Madbreaks
Madbreaks

Reputation: 19539

I needed something that would allow for US-formatted entries that could include a , thousands separator and optional 2-digit decimal places. I came up with this:

^[1-9]\d{0,2}(?:,?\d{3})*(?:\.\d{2})?$

Test it here: https://regex101.com/

Upvotes: 2

Sergio Gonzalez
Sergio Gonzalez

Reputation: 2190

I prefer: <input type='text' pattern='^\d+(?:\.\d{1,2})$'/>

It forces you to have at least one number after the dot, so you wont get anything like:

10000.
25846

It will only accept:

10000.1
25846.30
213464.12

Of course you need more server side validations in the case someone wants to bypass this one by changing the tag or javascript in the browser.

Upvotes: 0

thelastshadow
thelastshadow

Reputation: 3654

If you're hoping to use a css selector instead of Ids, I'd recommend jQuery for cross-browser support, but nevertheless in js you can do:

function isNumeric(selector){
   var elements = document.querySelector(selector);

   var regex  = /^\d+(?:\.\d{0,2})$/;
   for (var i=0, i < elements.length; i++) {

       // i added a test on the value attribute, 
       // as your original doesn't look like it should work

       if (regex.test(elements[i].getAttribute('value'))){
          $(elements[i]).css("border-color","#FFFFFF");
       }
       else{
          $(elements[i]).css("border-color","#FF0000");
       }
   }
}

or a version using jQuery for the selectors:

function isNumeric(selector){
   var elements = $(selector);

   var regex  = /^\d+(?:\.\d{0,2})$/;
   elements.each(function(){
       var $this = $(this);

       // i added a test on the value attribute, 
       // as your original doesn't look like it should work

       if (regex.test($this.val())){
          $this.css("border-color","#FFFFFF");
       }
       else{
          $this.css("border-color","#FF0000");
       }
   });
}

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

You are using jquery, so utilize it. Instead of adding the event in HTML markup, add it in jquery. like this:

$('#textOne,#textTwo,#textThree').on('eventNameHere', isNumeric);

and a small change in your function:

function isNumeric(){
   var numeric = this.value;
   -------
}

UPDATED:

(If you are not using textbox events but a button event which needs to handle all the textbox validations):

$('#textOne,#textTwo,#textThree').each(isNumeric);

Upvotes: 0

Khadim Ali
Khadim Ali

Reputation: 2598

How about trying this?

jQuery:

<script type="text/javascript">
    function AssignNumeric() {
        $('.numeric').each(function (i) {
            $(this).blur(function () {
                var regex = /^\d+(?:\.\d{0,2})$/;
                if (regex.test($(this).val())) {
                    $(this).css("border-color", "#FFFFFF");
                } else {
                    $(this).css("border-color", "#FF0000");
                }
            });
        });
    }

    $(document).ready(function () {
        AssignNumeric();
    });
</script>

html:

    <input id="Text1" type="text" class="numeric" />
    <input id="Text2" type="text" class="numeric" />
    <input id="Text3" type="text" class="numeric" />
    <input id="Text4" type="text" class="numeric" />

Upvotes: 0

Chinmay235
Chinmay235

Reputation: 3414

function onlyPrice(e) {
    var unicode = e.charCode ? e.charCode : e.keyCode;
    if( unicode != 8 )
    {
        if(unicode < 9 || unicode > 9 && unicode < 46 || unicode > 57 || unicode == 47) {
            if(unicode == 37 || unicode == 38) {
                return true;
            }
            else {
                return false;
            }
        }
        else {
            return true;
        }
    }
    else
    {
        return true;
    }
}

HTML

<input type="text" name="price" onkeypress="return onlyPrice(event)" />

Upvotes: 0

jayp
jayp

Reputation: 705

If you want to use jQuery/JavaScript, then you can just pass your selector like this:

function isNumeric(sel){
  var $numeric = $(sel);
  var regex  = /^\d+(?:\.\d{0,2})$/;
  if (regex.test($numeric.val())){
    $numeric.css("border-color","#FFFFFF");
      } else {
    $numeric.css("border-color","#FF0000");
  }
}

You could also take advantage of the HTMLInputElement's built-in validation (in the candidate recommendation for HTML 5):

<input type="text" pattern="^\d+(?:\.\d{0,2})$">

See here.

For styling, you can then use the :valid and :invalid pseudo-selectors.

If you need to guarantee cross-browser compatibility, you could use a polyfill like this.

Upvotes: 0

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3501

function isNumeric(id, border){
   var numeric = document.getElementById(id);
   var regex  = /^\d+(?:\.\d{0,2})$/;
   if (regex.test(numeric)){
     $('#'+border).css("border-color","#FFFFFF");
   }else{
      $('#'+border).css("border-color","#FF0000");
   }
 }

Upvotes: 1

Someoneinthe
Someoneinthe

Reputation: 372

try to use html5 pattern directly on your input:

<input type='text' pattern='^\d+(?:\.\d{0,2})$'/>

it works with all modern browsers. it will make the border red if the pattern is false

Upvotes: 4

Related Questions