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?
Did you check prior answers like http://forums.asp.net/t/1846158.aspx?accept+input+only+number+with+2+decimal+javascript
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.
That's not a big sin to repeat code. Solving it seems more important.
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.