Allow postive and negative decimal numbers only using Javascript

Question

User2038048451 posted

I have html text box, when user types in the text box, i want allow positive and negative decimal number, and want to restrict alphabets and special characters using java script/JQuery .

1. allow positive & negative decimal values
2. allow Negative(-) symbol only at starting of number, it should allow only one negative sign(-)
3. allow only one decimal point('.') ex: 12.90,-12.345
4. restrict alphabets, except '-' and '.'

allowed formats (examples: 12.344, 1.233,23,1222220.990,-12.343,-0.90)

not allowed formats(Examples : 12.344.55, -122.-34, -12-12,12.122.344)

Thanks

Answer 1

User753101303 posted

Hi,

Do you have to use JavaScript ? You could start with https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/number and then have JavaScript code to either replace that (possibly only if not supported by the browser?).

Answer 2

User475983607 posted

You can use isNaN() in JavaScript; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

<input type="text" id="decimal" name="decimal" />
<input id="Button1" type="button" value="Validate" />

<div>
   Is numeric: <span id="results"></span>
</div>

<script>

    $('#Button1').click(function () {
        var inputValue = document.getElementById("decimal").value;
        console.log(inputValue);
        document.getElementById("results").innerText = !isNaN(inputValue);
    });

</script>

But you still need to validate on the server.

Answer 3

User2038048451 posted

Hi All,

I was able to achieve this using below code, same is available in below link

https://jsfiddle.net/z0jrh6sL/4/

<input type="text" id="decimal" name="decimal" />
<div>
Is numeric: <span id="results"></span>
</div>

function isNumberKey(value) {
console.log(value);
var regex = /^[+-]?\d*\.?\d{0,9}$/;
if(regex.test(value)){
console.log("true");
return true;
}else{
console.log("false");
return false;
}
}

$("#decimal").on('keyup', function(){
if (!isNumberKey(this.value)){
$(this).val(function(index, value){
return value.substr(0, value.length - 1);
});
}
});

Answer 4

User288213138 posted

Hi nrk_hi,

 $('#decimal').keyup(function(e) {
    var a = [];
    var k = e.which;
    
            var inputValue = document.getElementById("decimal").value;
        
            if (isNaN(inputValue)) {
                this.value = this.value.substring(0, this.value.length - 1);
            }
       
       
    $('span').text('KeyCode: '+k);
});

The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN. Otherwise it returns false. 

When you enter the negative number, the first character is ‘"-", so the code in the isNaN() will be executed. and the substring() method extracts the characters from a string, between two specified indices, so as long as you enter a non-digit value, this character will be deleted by the substring().

Can you explain in detail the requirement of your design like this?

Best regards,

Sam