Hey guys i've been having some issues with calling my javascript function to my main HTML page.
I've got the javascript code:
function phonenumber(inputtxt)
{
var phoneno = /^\d{10}$/;
if(inputtxt.value.match(phoneno))
{
return true;
}
else
{
alert("Not a valid Phone Number");
return false;
}
}
But when i call it in my HTML i have this code:
<input type='text' name='text1'/>Phone Number: <input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/>
Are you able to assist me with this? sorry i'm kinda new to this :(
Thanks!
Your onclick attribute needs to know if the validation passed or not. In other words, you should return the value from your validator function.
... onclick="return phonenumber(document.form1.text1)" ...
I don't understand why you using onlclick method for validate phone no. field. I have a function try this for validation of number
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) ) // put your condition here
return false;
return true;
}
and fire it by using
<input type="text" name="mobile" id="mobile" class="" onkeypress="return isNumberKey(event)" />
Related
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.
I have one input field for time entry and it needs to enter hour and minute in hh:mm format. Only numbers can be allowed and additional unnecessary data are restricted. So could you have some solution for this issue using javascript or jquery or something that will be OK. Thank you.
<form>
<input pattern="\d{1,2}:\d{1,2}" id="Date" required="required" maxlength="5">
<input type="submit">
</form>
Scrpit
$(document).ready(function(){
$('#Date').keypress(validateNumber);
});
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (key < 48 || key > 58) {
return false;
} else {
return true;
}
};
See
I have a text box that I want a person to add a number, and only a number into. How would I make a function that, if the value added to the text box was not a number, they would get an alert that said, "must add a number", or something similar. without using RegEx!
thanks!
http://www.w3schools.com/tags/att_input_type.asp
You want to use type="number" on your input field
Type a number:
<input type="number"/>
Here is a solution that you can use to only allow the user to enter numbers, they can´t add anything that´s not a number
<HTML>
<HEAD>
<SCRIPT language=Javascript>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>
I have the following function which only allows for numerical characters to be entered in to the textbox. This is located inside common.js along with other global functions.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
Now inside another javascript file I have the following code, what I'm trying to achieve is bind the on keypress event of the textbox mobilenumber to the function mentioned above located in the common.js file I have made a reference to that common.js as follows:
/// <reference path="common.js" />
window.onload = function () {
document.getElementById('mobilenumber').keypress = isNumberKey(this.keypress);
};
But the error I receive is
isNumberKey is not defined $('mobilenumber').keypress = isNumberKey(this.keypress);
When I view source to check the naming conventions this is how it is rendered:
<input id="mobilenumber" class="form-control" type="text" value="" placeholder="Your Mobile Number" name="MobileNumber" data-val-maxlength-max="15" data-val-maxlength="Mobile number can not be longer then 15 characters" data-val="true">
I'm not sure where I'm going wrong with this? any help would be appreciated.
Update
Ok so I moved both javascript files into one file called common as shown here:
$(document).ready(function () {
document.getElementById('mobilenumber').keypress = isNumberKey(this.keypress);
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
});
When the page load instead of binding it, it calls it which gives me an error saying evt if undefined which I understand because nothing has been entered, why is it calling it? and how can I just bind it without having to call it?
Try
$("#mobilenumber").on("input", function(e) {
return $(this).prop("value", function(_, val) {
return val.replace(/[^\d]/, "").slice(0, 15)
})
});
$("#mobilenumber").on("input", function(e) {
return $(this).prop("value", function(_, val) {
return val.replace(/[^\d]/, "").slice(0, 15)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mobilenumber" class="form-control" type="text" value="" placeholder="Your Mobile Number" name="MobileNumber" data-val-maxlength-max="15" data-val-maxlength="Mobile number can not be longer then 15 characters" data-val="true">
JavaScript has no import, include, or require. There are other ways
for JavaScript to include external JavaScript contents, though...
From: How do I include a JavaScript file in another JavaScript file?
Perhaps try keeping both the function and the attachment of the event handler in one file.
You may like to check this:
http://jsfiddle.net/fq7Lkkyp/
$(document).ready(function () {
$("#mobilenumber").keypress(isNumberKey);
function isNumberKey() {
alert('check');
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
return false;
}
return true;
}
});
Using this code, user won't enter numeric value. In Google Chrome, input box is not taking numeric value but in Firefox it takes. I'm not getting, why it is happening. Any help appreciated.
<input type="text" name="station_name" id="station_name" onKeyPress="return noNumbers(this)" maxlength="45" />
this is my javascript function
<script type="text/javascript" language="javascript">
function noNumbers(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if((charCode>=65 && charCode<=90)||(charCode>=97 && charCode<=122)||(charCode==32))
return true;
return false;
}
</script>
This is because, in Firefox, the event is passed as a parameter to the event handler. event property of the window object is IE only.
function enterHere(e)
{
e = e || window.event;
var code = e.keyCode || e.which;
if(code == 13)
find();
}
you are passing this in the following line, pass event
<input type="text" name="station_name" id="station_name" onKeyPress="return noNumbers(event)" maxlength="45" />
EDIT
ok try the follwoing function and the input tag as above:
function noNumbers(evt)
{
var charCode = evt.keyCode || evt.which;
if((charCode>=65 && charCode<=90)||(charCode>=97 && charCode<=122)||(charCode==32)||||(charCode==8))
return true;
return false;
}