Here is the fiddle which will allow only to numbers.
I want to do this in based on id.
So i created this fiddle
$(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 != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
How can i do this for a series of id like quantity1,quantity2, like this..
Update :
I can't use class name.. How can i do it only by id
All you've to do is to match all the id's which is simple. See this fiddle.
Here's the part code -
$(document).ready(function () {
//called when key is pressed in textbox
$("[id^=quantity]").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
Demo
Try this
HTML
Number : <input type="text" name="quantity" class= "numberonly" id="quantity1" />
Number1 : <input type="text" name="quantity" class= "numberonly" id="quantity2" />
Number1 : <input type="text" name="quantity" class= "numberonly" id="quantity3" />
<span id="errmsg"></span>
Jquery
$(document).ready(function () {
for(var i = 1; i< 4 ;i++)
{
//called when key is pressed in textbox
$("#quantity"+i).keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
}
});
Related
I want to setup validation in jQuery. It's not working, what should I do on submit button and jQuery code?
function validate() {
var total = $('#total').val();
var limit = 1000;
if (total > limit) {
alert('numbers cannot exceed the limit');
return false;
} else {
// submit
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="total"></input>
<input type="submit" value="Submit" onclick="validate()">
As #Devsi Odedra comment, you should parse the value to number to be able to compare instead of comparing string as well.
$('#total').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1)
&& (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
function validate() {
var total = parseFloat($('#total').val());
var limit = 1000;
if(total > limit) {
alert('numbers cannot exceed the limit');
return false;
} else {
// submit
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="total"></input> and submit button <input type="submit" value="Submit" onclick="validate()">
Updated
You should validate to only allow input float number like this
$('#total').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
you should use button type instead of submit because submit must be use under the form tag
function validate() {
var total = $('#total').val();
var limit = 1000;
if (total > limit) {
alert('numbers cannot exceed the limit');
return false;
} else {
// submit
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="total"></input>
<input type="button" value="Submit" onclick="validate()">
Before some Firefox update, my app is working fine but after that I cannot CTRL + V (doing Right Click -> Paste is still working fine) anymore. Any idea for this problem?
This is aspx code on the page:
<td width="50%">
<input type="text" maxlength="10" id="RequestID" value="<% =RequestId %>" name="Request_ID"
onload="document.LBS.Request_ID.focus()" onkeypress="if (fnCheckKeyPress(event) == false) {event.returnValue = false; return false;}" />
</td>
The problem is on the "onkeypress" field. If I delete that then it works just fine, but it cannot filter text (it suppose to have only digits) anymore. The function is called from the js file:
function fnCheckKeyPress(event) {
// KeyCode Info: 13-ENTER ; 27-ESC ; 9-TAB ; 8-BACKSPACE ; 46-DELETE
var nKeyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
//alert(nKeyCode);
if (nKeyCode == 13) return false;
if (navigator.userAgent.indexOf("Firefox") != -1) {
if (event.keyCode >= 3 && event.keyCode <= 39) return true;
if (arguments.length > 0 && arguments[0].isChar == false && arguments[0].ctrlKey == true) return true;
}
if (nKeyCode < 46 || nKeyCode > 57) return false;
return true;
}
I am trying to prevent user from entering 0 in the input box.
HTML code :
<input class="billMenuQuantity" type="number" name="quantity">
Jquery code:
$('.billMenuQuantity').on('keyup keydown', function (e) {
if ($(this).val() < 1 && e.keyCode != 46 && e.keyCode != 8) {
e.preventDefault();
$(this).val(1);
}
});
It's preventing the user from entering the 0 but it's also preventing the user from entering the any other single digit number(i.e 2-9) other than 1.It is accepting the double digit number(i.e 11, 12 etc).
Can any one help me with this?
Just test code === 96 and length of the input-value
$('.billMenuQuantity').on('keyup keydown', function(e) {
var code = e.keyCode || e.which;
if (this.value.length === 0 && code === 96) {
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input class="billMenuQuantity" type="number" name="quantity">
Try this one
$(this).val() == 0 instead of $(this).val() < 1
$('.billMenuQuantity').on('keyup keydown', function (e) {
if ($(this).val() == 0 && e.keyCode != 46 && e.keyCode != 8) {
e.preventDefault();
$(this).val(1);
}
});
I need to restrict user input to allow only a integer or a two decimal number with a limit from 0 till 99999.99.
Tried with script but not succeed in all scenarios.
also, required this should work with mobile OS also.
$('#txtamount').keydown(function (event) {
if (event.which == 8 || event.which == 9 || event.which == 37 || event.which == 38 || event.which == 46) {
//event.preventDefault();
return true;
}
alert('final' + event.which);
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
return false;
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
return false;
event.preventDefault();
}
});
Tried with below stuff but, not working to restrict special chars.
http://jsfiddle.net/jquerydeveloper/LmHkD/
Instead of using keycode detection, probably better to use a regex and onchange, rather than keydown.
$(document).ready(function () {
$('input[name="number"]').change(function (e) {
var valueEntered = $(this).val()
var regex = /^[0-9]{1,5}(\.[0-9]{2})?$/
if (!regex.test(valueEntered)){
$(this).val(''); //set value to nil, consider also display message
}
});
});
I'd also modify the input type to be a number, rather than text:
<input name="number" type="number" value=" " />
JSFiddle: http://jsfiddle.net/LmHkD/259/
Note, this will just get you started, you may need to update the regex for your exact scenario
I have an MVC form that I want to restrict the entry on some textboxes to numbers only. I found this code that does that, however, it also restricts the use of the numbers on the keypad pad on the right of the keyboard. Any ideas on how to allow the keypad? I am not sure what is causing that to happen.
<script type="text/javascript">
function ValidateNumber(e) {
var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
};
HTML Razor:
#Html.TextBoxFor(m => m.CustomerSSN, new { #placeholder = "Customer SSN", #type="number" })
Another approach would be to use the HTML 5 input tag that has built in validation.
<input type="number" name="quantity">
www.w3schools.com/html/html_form_input_types.asp
So here is how I solved this...
<script type="text/javascript">
//Allow only numbers entered
$(document).ready(function () {
$("#CustomerSSN").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});