Validate numeric text field in jquery

Question

I have this code in jquery to prevent non-numeric characters being inputted to the text field

$("#NumericField").numeric();

Now, on the text field i cant input non-numeric characters. That is OK. The problem here is if the user will paste on the text field with non numeric characters.

Is there a way/method to disable pasting if the value is non-numeric? Or is there any other approach to handle this situation that you can share?

You should better use a class instead of an ID to identify all numeric fields. Now you can only have a single numeric field on a page. — Vilmantas Baranauskas
– Vilmantas Baranauskas, Commented Nov 9, 2009 at 10:30

amantur · Accepted Answer · 2009-11-09 06:32:05Z

5

you can use callback which checks on leaving field if value is valid if value is not valid then clear it and show error message:

var decimal_char = ',';
function isvalidnumber(){
    var val=$(this).val();
    //This regex is from the jquery.numeric plugin itself
    var re=new RegExp("^\\d+$|\\d*" + decimal_char + "\\d+");
    if(!re.exec(val)){
        alert("Invalid number");
        $(this).val("");
    }       
}
$(document).ready(function(){
    $("#txtN").numeric(decimal_char,isvalidnumber);
});

edited Nov 9, 2009 at 6:32

answered Nov 9, 2009 at 6:10

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaivosukeltaja Over a year ago

Maybe instead of an error message the input could just be filtered to remove the illegal characters? It could be nicer for the user if he/she pastes a number that has a space in the end, for example.

amantur Over a year ago

I've modified it. first one was not working and not taking into account decimal char

amantur Over a year ago

@borato this was just to illustrate.

Lucas Guegnolle · Accepted Answer · 2010-04-10 04:17:01Z

1

Where it says:

value = value.replace(/\./, "");

You should put:

value = value.replace(/\.\,/, "");

I guess ;-)

I really ended up doing this:

$(‘.InputClass’).keyup(function(){
  if ($(this).val() != "")
     $(this).val( $(this).val().replace(/[^0-9\.]/g, "") );
});

So, no anoying alerts nor anything; just if you type anything else than a number or a dot after a number, is wipped out. Simple but efective.

Cheers. Hope helps someone.

edited Apr 10, 2010 at 4:17

answered Apr 10, 2010 at 3:39

Lucas Guegnolle

112 bronze badges

Comments

gevorg · Accepted Answer · 2016-06-09 13:05:10Z

1

I found this script on http://www.kunalbabre.com/jQueryLibrary/index.php:

$('input[numeric]').keyup(function() {    
    var d = $(this).attr('numeric');

    var value = $(this).val();
    var orignalValue = value;
    value = value.replace(/[0-9]*/g, "");

    var msg = "Only Integer Values allowed.";

    if (d == 'decimal') {
        value = value.replace(/\./, "");
        msg = "Only Numeric Values allowed.";
    }

    if (value != '') {
        orignalValue = orignalValue.replace(/([^0-9].*)/g, "")
        $(this).val(orignalValue);
        //alert(msg);
        $(this).after('<span style="margin-left:5px;color:red;position:absolute;">' + msg + '</span>');
    } else {
        $(this).next('span').remove();
    }
});

It works fine except if the number has ',' on it like '100,000.00'. It will render just '100'. The ',' and the rest are gone.

Edit: I think this is on the reg ex but im clueless about it. :(

Any Idea? Help?

edited Jun 9, 2016 at 13:05

gevorg

5,1155 gold badges40 silver badges54 bronze badges

answered Nov 9, 2009 at 7:02

mark vanzuela

1,3914 gold badges23 silver badges40 bronze badges

1 Comment

Asad Naeem Over a year ago

Please add this code of line before adding the span $(this).next('span').remove(); The reason behind is that text becomes darker and darker so better to remove span before adding.

Collectives™ on Stack Overflow

Validate numeric text field in jquery

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related