I have a number of HTML inputs in a website. They are inside a form, but the form is not submitted to the server. Rather, values of the assorted inputs (number inputs, text inputs, and check boxes) are used to ultimately 'stitch together' a product code based on the inputs and selected options. (using JavaScript)
My problem is this: while the number input
<input type='number'/>
only allows a number value when used in a server-side submit, I am using JavaScript to check the assorted values of the different inputs. This allows for a letter (alphabet) character to be put in the number input. IF you do this, the input becomes outlined in red, but it still allows the function that stitches together the product code to be called.
What I need is a way to detect if a given string contains an alphabetical character, instead of just numbers. My idea was something like this:
<input type='number' id='inp' />
<script>
input=document.getElementById('inp');
val=input.value;
checkforletters(val);
input.onchange=function(){
if(checkforletters){
//resetting the value to blank if there is an alphabet character in the string
input.value='';
}
}
</script>
You'll notice that there is a function in there called
checkforletters()
I have not written it. This function would check and see if there is an alphabet character inside the string that comes from the value of my input; and if there is, the function would return true.
This function is what I need. The rest of the code resets the value of the input to blank if there is an alphabet character.
So, to summarize, what I need is a function that, when passed a string as an argument, returns true if there is an alphabet letter in it, and false otherwise.
Note
Please use pure JavaScript only. No jQuery or other libraries/frameworks.
You can use isNaN() function to make your own function that check if the given string is numeric :
//Will return true if the given string is number, false if is contain characters
function isNumeric(yourString){
return !isNaN(yourString)
}
Hope this helps.
My problem is this: while the number input only allows a number value when used in a server-side submit, I am using JavaScript to check the assorted values of the different inputs. This allows for a letter (alphabet) character to be put in the number input. IF you do this, the input becomes outlined in red, but it still allows the function that stitches together the product code to be called.
You can utilize the built in HTML5 constraint validation with JavaScript. This means that instead of having to check whether the value is valid, the value can never be invalid to begin with.
The following example will disallow any invalid input at the user level. It does this by checking the validity then storing the value for future use if it is valid or, if the value is not valid, setting the value to the previously stored valid value if there is one, an empty string if not.
This means that the value can never be invalid.
<input type="number"
oninput="(validity.valid&&(dataset['prev']=value))||(value=dataset['prev'])">
The following is the same method, without using inline JavaScript
document.getElementById('test').oninput = function() {
if(this.validity.valid) this.dataset['prev'] = this.value;
else this.value = this.dataset['prev'];
}
<input type="number" id="test">
So, to summarize, what I need is a function that, when passed a string as an argument, returns true if there is an alphabet letter in it, and false otherwise.
If a number input's value is invalid, it will return an empty string.
This means that you cannot compare the returned value to check it's validity, because if it is in fact invalid the returned value will be an empty string.
The following example shows that even if the value is invalid, checking it with isNaN won't show you that, nor will any of the other methods mentioned here.
<input type="number" oninput="document.getElementById('value').textContent = value; document.getElementById('isnum').textContent = !isNaN(value)"><br>
Returned Value: <span id="value"></span><br>
Is a number: <span id="isnum"></span>
If you really want to validate the input element while running your script, you can check the input element's validity at that time.
var test = document.getElementById('test');
document.getElementById('button').onclick = function(e) {
if(!test.validity.valid) {
alert('Its Invalid!');
} else {
alert('Its valid!');
}
}
<input id="test" type="number"><button id="button">Check It</button>
Alternatively, if your input elements are inside a form and you run your script on the form submission event, it will automatically validate for you, and disallow submission unless the value is valid.
var test = document.getElementById('test');
document.getElementById('form').onsubmit = function(e) {
e.preventDefault();
alert("Its valid!"); // this will only happen if the inputs are valid.
}
<form id="form"><input id="test" type="number"><button>Check It</button></form>
Use a regular expression that matches any non-digits.
var myString = 'aaaaa1';
var reg = new RegExp(/\D+/);
console.log(reg.test(myString));
// true
here is simplest way- handle onkeyup:(http://jsfiddle.net/vittore/g7xe0drp/)
var inp2= document.getElementById('inp2')
inp2.onkeydown = onlyNumbers
function onlyNumbers(e) {
console.log(e)
if (e.which <=49 || e.which >=57) {
e.preventDefault()
return false;
}
}
Check that string contains only numbers (\d):
function checkforletters(val) {
var pattern = /^\d+$/;
return pattern.test(val);
}
If you need other characters beside numbers instead of \d use [\d,-] (, and - are characters that you want to allow).
Please use this to check for alphabets or special characters in your input:
checkforletters(val){
var pattern = /[\D]+/
if (pattern.test(val)) {
// val contains a non-digit character, it contains alphabet or special character
}
else{
// val only contains digits
}
}
pattern.test(val) will only return true if val contains alphabet
You could try this I found on the filter page of developer mozilla org.
function isNumber(obj) {
return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}
array filter
Of course you will need to rework it a little to make isString(), you could try typeof(obj) === 'string' && isNaN(obj).
you can get a list of obj from a string with theString.split('')
For example:
let s = 'Is this 1 or 2 and not 3 strings? .! : '
let c = s.split('')
let d = c.map((c,i) => {
let v = typeof(c) === 'string' && isNaN(c) ? 'string': 'not-string'
return {c, v}
})
console.log(d)
Related
i want to get the character typed into an html text input field on keypress
then validate the character entered against a list of characters
and return false if it isn't found in that list
(i don't want to use regular expressions)
by 'list' i mean this:
var acceptable = 'abcd12';
this would prevent, for example, the character 'e' being entered, and so on
the html would look like this:
<input id='someId' type='text' onkeypress='return check(this,event);'>
and the javascript:
function check(element,e) {
var acceptable = 'abcd12';
// now get what character was entered
// if it's in the list, return true
// if it's not in the list, return false
}
Generally, you would want to bind an onChange event handler to the input field like this:
jQuery('#someId').change(function() {
var acceptable = ['1', '2', 'a', 'b', 'y'];
var text = jQuery(this).val();
var allowed = true;
// Loop through each character in the string
var length = text.length;
for (var i = 0; i < length; i++) {
// This if condition is fulfilled if the character
// is not in the array of acceptable characters
if (jQuery.inArray(text[i], acceptable) != -1)
allowed = false;
}
if (allowed)
// The input is valid
else
// The input contains an unallowed character
});
IMPORTANT:
You always have to do server side verification of the data submitted via a form. Anyone can mess with the code in your script and the HTML code. There are many ways to send false data to your server, no matter what you do to prevent it. Therefore it is extremely important to always do server side verification, since the server environment is entirely in your control.
Side note
The onChange event handler only fires when the field loses focus. If this behaviour is undesirable for you, use this:
jQuery('#someId').on('change keypress paste focus textInput input',function(){
// The same code as above can be used here
}
See this link for more information on this.
If you create a variable chr with the character that was entered, then
acceptable.indexOf(chr) !== -1
will be true if the character is acceptable (in the string).
I'll propose a solution without regexes, although I don't understand that constraint.
Here is a logical proposal to validate your strings.
Take your input string, replace occurrences of each of the valid characters in it with '' (empty string), then just verify that the length is 0. If there are characters left (length > 0), validation doesn't pass.
Also note there are other ways of doing this. Modern browsers support the pattern attribute on text inputs, which will validate against a regex (which is trivial to write for this case).
Here is a demo of this in action.
HTML
<input type="text">
JavaScript
input = document.querySelector("input");
restrictChars(input, "abc");
function restrictChars(input, chars) {
input.addEventListener("keypress", function (e) {
e.preventDefault();
var character = String.fromCharCode(e.keyCode);
var isValid = chars.indexOf(character) != -1;
if (isValid) {
input.value += character;
}
});
}
Basically we prevent the default behaviour of the keypress event (to prevent typing) and use it to obtain the pressed key from the event.keyCode. Then, we test to see if that character is present in the chars parameter (without the use of unnecessary regex in my opinion), if it is, we simulate the normal behaviour by adding the character to the <input>'s value, if it's not, we do absolutely nothing, resulting in nothing getting typed.
Hope this helps!
I've made a small jQuery-based solution:
$(document).ready(function() {
$('#input').keypress(function(e) {
var allowed = '02468abc';
var e = e||window.event;
var k = e.keyCode||e.which;
var r = allowed.indexOf(String.fromCharCode(k))!=-1;
r = (k==8||(k>=35&&k<=40)||k==46)?true:r;
if(!r) {
e.returnValue = false;
if(e.preventDefault)
e.preventDefault();
}
});
});
Add the characters you want to pass inside the variable allowed, in this code, allowed characters are 0, 2, 4, 6, 8, a, b, and c.
Just make sure you have this in your HTML:
<input id="input" type="text"/>
You should be good to go using this.
If jQuery is not an option, leave a comment and I'll add some jQuery-less code.
Edit: Changed code to allow use of arrow keys, backspace, home, end, and delete.
Rou's code is clean, but keycode will always return capital letters. If you need this to be case-sensitive, keycode won't work.
I'm also assuming you always want to check the last character entered.
function check(e,element) {
var acceptable = 'abcd12';
var char = element.value.charAt(element.value.length - 1);
if(acceptable.indexOf(char)>=0){
document.getElementById("result").innerHTML="true";
}
else
{
document.getElementById("result").innerHTML="false";
}
}
var inputElement = document.getElementById('someId');
inputElement.addEventListener('keyup', function( e ) {
check( e, inputElement )
});
Here's the code in JSFiddle if you want to modify it: http://jsfiddle.net/hckytaez/4/
First i'd like to mention that i've been researching about this for few days and although i found some answers that should have been helpful i was unable to use them correctly due to the fact that i am not that much into programming yet and got no experience and might be missing something.
Straight to the point, i have a registration form and i need field validation i already have the one that validate email and empty fields for others but i need to add to the code a part that would reject numerical entries in name fields and alphabetical characters for ID field and to limit the length of a field.
Let's start with the Name field which i want to allow alphabetical characters only here is my current code:
{
var fn=document.forms["myForm"]["FirstName"].value;
if (fn==null || fn=="")
{
alert("First name must be filled out");
return false;
}
And that's my ID field which i want to limit to numerical entries only
var id=document.forms["myForm"]["ID"].value;
if (id==null || id=="")
{
alert("ID must be filled out");
return false;
}
I want to a couple of lines that would limit entries to a specific number of characters as well, how do i do that?
To check for a string length in Javascript you can use the .length method:
// this checks if the fn length is more than 10
if (fn.length > 10) {
}
To check if a value is numeric you can parse it and make sure that returns a valid output:
// This checks if id is not a valid integer
if (isNaN(parseInt(id)) {
}
To check if a value is alphabetical only you have to make sure the characters in it fall within the alphabets range, you can add a function that checks for that:
// This loops on every character of value and makes sure it is part of the letters string
function isAlphabetical (value) {
var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (i = 0; i < value.length; i++) {
if (letters.indexOf(value.charAt(i), 0) == -1) {
return false;
}
return true;
}
}
And then call it from your if statement:
// This checks if fn is not alphabetical
if (!isAlphabetical(fn)) {
}
This is strange behavior to me but on Webkit browsers (Chrome/Safari, not Firefox) if I include a space in a string of numbers in an <input type=number> then the value of that input is empty.
See this JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/5/
Here's the code:
<input id='withOutspace' type='number' value='123'>
<input id='with_space' type='number' value='123 123'>
<button>click</button>
$('button').click(function(){
alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val());
});
If you go to this JSFiddle, you'll notice that the with_space input is empty. But if you put it in it a number that has a space or any non-numeric characters, the alert will say that input is empty.
Obviously, this is a disaster for form validation with credit card numbers, etc. so does anyone have a hack for this?
The hack is to use type="tel" instead of type="number".
This solves the 2 main issues:
It pulls up a number keypad on mobile devices
It validates (and is not empty) with numbers or non-numbers as input.
Please see this JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/6/
I can suggest two ways.
1. Prevent chars in input
# updated to support more numerical characters related
$(window).keydown(function(e) {
if($('input[type=number]').index($(e.target))!=-1) {
if(
($.inArray(e.keyCode, [48,49,50,51,52,53,54,55,56,57,58,96,97,98,99,100,101,102,103,104,105,8,13,190,189]) == -1) // digits, digits in num pad, 'back', 'enter', '.', '-'
|| (e.keyCode == 190 && $(e.target).val().indexOf(".") != -1) // not allow double dot '.'
|| (e.keyCode == 190 && $(e.target).val().length == 0) // not allow dot '.' at the begining
) {
e.preventDefault();
}
}
});
or 2. Change input's type on fly
$('input[type=number]').focus(function() {
$(this).prop('type', 'text');
});
this allows to put whatever you want and change its type back onblur
$(this).blur(function() {
$(this).prop('type', 'number');
});
But still you cannot store nonnumerical values in input with type=number, so val() will always return you empty string if it meets char or space.
So, at least you have to remove all garbage with .replace(/[^\d]/g, '') - that means "remove all except numbers" before you change type back
In my example I show both methods + clear input values.
A way to control input number is to set it empty on blur when you can't read value
static formattedDecimalInput(input, maxScale, allowEmpty = true) {
input = $(input);
input.on("blur", function(e) {
var inputVal = input.val();
if(inputVal != "" || !allowEmpty) {
if(inputVal == "") {
inputVal = "0";
}
var number = Number(inputVal);
input.val(number.toFixed(maxScale));
} else {
input.val("");
}
});
}
You can formatted it by the way, and if you have invalid char on server side you can send a bad request response.
If you want a requiered field, you can just check if the input is empty with javascript before your server call
It is not really the answer of the initial question but I was looking for a user friendly control for this type of input when I arrived here
My hack for this problem includes the following (i use jQuery validators):
$(document).on('keyup', '[type="number"]', function () {
if (this.validity.badInput) {
$(this).attr('data-badinput', true);
}
});
Later in validator method i do this:
$.validator.addMethod('isInteger', function (value, element, parameterValue) {
if ($(element).attr('data-badinput')) {
//We know nasty browser always clears incorrect input, so empty string will look OK next time
$(element).removeAttr('data-badinput');
return false;
}
return !value || /^-?\d+$/.test(value);
});
You're setting a numeric input field to a string which is not a number. What did you expect to happen? The whole point is that these fields don't allow or accept non-numeric input. They are documented as only accepting a floating point value.
There is no "hack" available or required; the solution is to stop using a number input field for a value that isn't a number. Credit cards, phone numbers, etc; these things are not numbers. They contain digits as a subset of the valid characters, but they also contain completely non-numeric characters like spaces, hyphens and parenthesis. They need to be stored and treated as regular strings.
Use <input type="text"/>.
What I'm trying to achieve is a code checker. Only the first 4 numbers are important, the other numbers can be any number. The form will be used for users to put in productcodes.
The problem is that if the variable changes to say, 5 numbers the variable is false.
See below example:
http://jsfiddle.net/MZfxs/3/
If the user puts in the numbers 3541 the box changes color, but if the user put in the remaining numbers the value is set to false.
Additionally I'm trying to make the box only change color when 13 numbers are inserted AND the first 4 numbers are matching, in that order.
Solved!
Working Example:
http://jsfiddle.net/MZfxs/8/
If I understood correctly, you need a field value validation and the requirement is the value should start from 4 numbers like 7514 or 9268. Here you can use a regular expression to validate input value like:
// Will work for " 123433 " or "12345634 ", etc.
var value = $(this).val(),
re = /^\s*(\d{4})(\d+)\s*$/, // better to initialize only once somewhere in parent scope
matches = re.exec(value),
expectedCode = 3541,
expectedLength = 13;
if(!!matches) {
var code = matches[1]; // first group is exactly first 4 digits
// in matches[2] you'll find the rest numbers.
if(value.length == expectedLength && code == expectedCode) {
// Change the color...
}
}
Also if your requirement is strict to length of 13 than you can modify the regular epression to
var re = /^(\d{4})(\d{9})$/;
and retrieve first 4 numbers in first group and rest 9 in second group:
var matches = re.exec(value);
if(!!matches) {
var first4Digits = matches[1],
rest9Digits = matches[2];
// ...
// Also in this way you'll not need to check value.length to be 13.
}
You can break the string each time on key event fires. You can do this by calling js substring() method and take the first four characters and check it.
Try to use this:
<script>
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
var value2 = $(this).val().substr(0,4);
if(value2 == 3541){
$(".square").css("background-color","#D6D6FF");
}else{
$(".square").css("background-color","yellow");
}
})
</script>
I've got a form where the user inputs 3 values, which are then calculated. The outputs are displayed again within the form in some "readonly" output boxes. For each input, I want to validate if they are a number, if not, instead of the form showing "NaN" I want to display an error saying, "Please enter a number" (or something like that). Below is the code I am using, which is executed "onkeyup":
function checkforNumber()
{
if (isNaN(sInput || dInput || pInput) == true) {
alert("You entered an invalid character. Please reset the form.");
}
else {
return(false);
}
}
Am I using this function incorrectly? Is there something wrong with the syntax?
Thanks
if (isNaN(sInput) || isNaN(dInput) || isNaN(pInput)) {
alert("You entered an invalid character. Please reset the form.");
}
also make sure that those 3 variables sInput, dInput and pInput are not strings but were obtained by using parseFloat or parseInt methods.
var sInput = parseFloat(document.getElementById('sinput').value);
var dInput = parseFloat(document.getElementById('dinput').value);
var pInput = parseFloat(document.getElementById('pinput').value);
if (isNaN(sInput) || isNaN(dInput) || isNaN(pInput))
This is what I think you intended. You need to pass each value you want to test in to the isNaN function one at a time. Also note that you don't need the == true part, because isNaN returns true or false so the condition will evaluate to the return value.