We Keep Coding

Validate the input, Input field should not accept more than 100 value in angular 8

I had to validate a input field to accept only number and decimal, one digit after the decimal. i was able to achieve it. i also need to limit the input field such that, it should not take more than 100. I have added a condition for that but its failing. I'm validating this on keypress can anyone please let me know where im going wrong.
stackblitz editor link - https://stackblitz.com/edit/angular-with-alternative-6zczr4
link - https://angular-with-alternative-6zczr4.stackblitz.io
code:-
app.component.html
<div class="form-group mr-3">
<p class="mb-0">Accepts Number
</p>
<input type="number" min="0" max="100" (keypress)="numberOnly($event)" class="form-control form-width" name="electricity" [(ngModel)]="electricity">
</div>
app.component.ts
public electricity = "";
numberOnly(event): boolean {
const charCode = event.which ? event.which : event.keyCode;
const value = event.target.value;
if (("" + event.target.value).indexOf(".") !== -1) {
if (("" + event.target.value).split(".")[1].length > 0) {
return false;
}
}
if (event.target.value > 100) {
return false;
}
if (charCode === 46) {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

if (event.target.value > 100) {
return false;
}
This should indeed fail. You are comparing whatever the value of the input box is, with 100. You need to compare the length of the value with 100, not the value itself. You could use the following:
if(("" + event.target.value).length > 100){
return false
}

You can achieve the result with pure html. No need for javascript.
Have a look at the code, is this what you're looking for?
<form>
<input
type="number"
min="0"
max="100"
step="0.1">
<button type="submit">Submit</button>
</form>

Javascript restrict text field to numbers and decimals?

I've tried a few solutions here but all of them boil down to removing the non-numeric input after the input is put in.
This solution here works for numbers:
https://jsfiddle.net/HkEuf/17470/
But it doesn't allow decimals.
I've to edit it as follows but it still won't allow for decimals:
$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 110 && e.which != 190 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57 )) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" id="quantity" />

You could do this all with HTML, all you need to do is use the number type with a step attribute like this.
Note 1: By adding the required attribute we can validate the field on submit otherwise it won't be validated unless there is input within the field.
Note 2: the number type also supports min and max
Note 3: Supports IE 10+ and all other major browsers
<form>
<input type="number" step="0.001" name="quantity" id="quantity" required>
<p><input type="submit" value="Numbers Only!"></p>
</form>
Prevent "E" key
We can block the e key with a keydown event and if e.key == 'e' we can prevent the key:
Array.from(document.querySelectorAll('[type=number]')).forEach(i => {
i.addEventListener('keydown', function(e) {
if(e.key == 'e') e.preventDefault()
})
})
<form>
<input type="number" step="0.001" name="quantity" id="quantity" required>
<p><input type="submit" value="Numbers Only!"></p>
</form>

Here I've added some code in your jsfiddle reference to allow decimal number and prevent user to enter "." symbol twice. Here's the complete code
$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
var tempInput = $("#quantity").val()
if(tempInput.split(".").length >= 2 && e.which == 46)
return false; //To check whether user has entered dot symbol before
//if the letter is not digit then display error and don't type anything
if (e.which != 110 && e.which != 46 && e.which != 190 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
If anything goes wrong, feel free to ask.
P.S : I assume that you use "." symbol to represent float number

$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
// If it's not a digit then display error and don't type anything
if (e.which == 46 || e.which == 8 || e.which == 0 || (e.which > 48 && e.which < 57 )) {
// Validate count of decimal separators
var dSCount = ($(this).val().match(/\./g) || []).length;
if (e.which == 46 && dSCount > 0) {
// Display error message
$("#errmsg").html("Only one decimal separator allowed").show().fadeOut("slow");
return false;
}
} else {
// Display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
There is a chance that the input ends with a dot, you'll have to validate that too (you could simply remove the trailing decimal separator before the form submission).

.includes Not Finding Period

I have a JavaScript function that prevents a user from typing any character but numbers and a period. I also am trying to prevent a user from typing multiple periods. From my observations of how this script is working, if a user types a period and then a number (".1"), they won't be able to type anymore periods after nor before that until the first one is removed. Yet for some reason the user can type two or more consecutive periods ("..") without the function preventing it. Interestingly, that causes the function to not find any decimals and thus allows the user to type as many decimals as their heart desires. Here is the code I am working with:
function isNumberKey(evt){
if (evt.keyCode == 0) {
var charCode = evt.charCode;
if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) {
return false;
} else {
if (charCode == 46) {
if (document.getElementById('inputBox').value.includes(".") == true) {
return false;
} else {
return true;
}
} else {
return true;
}
}
}
}
<form name="form" id="form" onsubmit="calculate(); return false;" accept-charset="utf-8">
<input type="number" onkeypress="return isNumberKey(event)" value="0" min="0" id="inputBox">
</form>
Feel free to play with it. Maybe I am not using the right thing to find the period. What am I doing wrong here? Why is it allowing a period to be typed right after another period is already present?
I don't know if this has anything to do with it, but I am on the latest Firefox on Ubuntu 16.04 LTS.

It is because you declared this input as number, so '.' are being removed from its value. Just change input type to text:
function isNumberKey(evt){
if (evt.keyCode == 0) {
var charCode = evt.charCode;
if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) {
return false;
} else {
if (charCode == 46) {
if (document.getElementById('inputBox').value.includes(".") == true) {
return false;
} else {
return true;
}
} else {
return true;
}
}
}
}
<form name="form" id="form" onsubmit="calculate(); return false;" accept-charset="utf-8">
<input type="text" onkeypress="return isNumberKey(event)" value="0" min="0" id="inputBox">
</form>

Your entire isNumberKey function is included inside an if statement that checks if the event's keyCode is zero. When you type a period, the keyCode is 46. So your logic never gets executed.
As a side not, KeyboardEvent.keyCode is deprecated; you shouldn't use it. MDN recommends using KeyboardEvent.key instead.
As guijob said, you should also change the input's type to text.

how to pass commas when entering in textfield

We are developing a Worklight Hybrid mobile application using Jquery mobile.
I want to pass commas when entering digits in a number text field. Text field maxlength 9.
I want the control to show values like this 5,652,895.
Please can anyone tell me where I am missing the logic?
$(document).on('keyup', '.value', function() {
if(event.which >= 37 && event.which <= 40) return;
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});
<input onKeyDown="if(this.value.length==9 && event.keyCode != 8)return false;" id="txtVehicleValue" placeholder="Vehicle Value" name="vehicleValue" class="value">

Try this:
<input class="number" onkeyup="addComma(this);">
Jquery:
function addComma(obj) {
$(obj).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
}

Solution for this Question
$(document).on('keyup', '.number', function() {
if(event.which >= 37 && event.which <= 40) return;
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});
<div class="qic-form-group showError">
<input onKeyDown="if(this.value.length==9 && event.keyCode != 8)return false;" class="clearTxtFld number" placeholder="Vehicle Value" name="vehicleValue">
</div>

Backspace not working after using jquery class

For an input field I have used a class
Here code for input field:
<?php
echo $this->Form->input('duration', array('class'=>'input-large text-right number- field','value'=>'0'));
echo $this->Form->error('duration');
?>
Here the jquery class code:
$(".number-field").keypress(function(e) {
var code = e.which || e.keyCode;
if(code >= 48 && code <= 57) {
console.debug(code);
} else {
return false;
}
});
Main reason In input field use can't type character in digits field. This class working fine.But after type digits backspace not working. For example suppose I have typed 1956, now I want to edit it 1955. In here I am enable to cut 6 by backspace.

You can use following script -
$(".number-field").keypress(function(e) {
var code = e.which || e.keyCode;
//allow Backspace and Delete key.
if((code >= 48 && code <= 57) || code == 8 || code == 46) {
console.debug(code);
} else {
return false;
}
});
Similar to escaping the 'backspace' key you might want to escape the 'Delete' key(code == 46)
If you just want to allow the numbers in input type then you can use HTML5 input type number.
<input type="number" name="year">

You can use regex for this:
var reg = /^\d+$/; // only number
$(".number-field").keypress(function(e) {
var code = e.which || e.keyCode;
if(reg.test(String.fromCharCode(code))) {
console.debug(code);
} else {
return false;
}
});