I want to allow only alphabets in textbox using JavaScript
I used the code:
var nam=f.nm.value;
if(!isNaN(nam))
region.innerHTML="alphabets only";
It is not working and allows numbers as well. How can i fix this?
<html>
<head>
<title>allwon only alphabets in textbox using JavaScript</title>
<script language="Javascript" type="text/javascript">
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<input type="text" onkeypress="return onlyAlphabets(event,this);" />
</td>
</tr>
</table>
</body>
</html>
just use onkeypress event like below:
<input type="text" name="onlyalphabet" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
From kosare comments, i have create an demo http://jsbin.com/aTUMeMAV/2/
HTML
<form name="f" onsubmit="return onlyAlphabets()">
<input type="text" name="nm">
<div id="notification"></div>
<input type="submit">
</form>
javascript
function onlyAlphabets() {
var regex = /^[a-zA-Z]*$/;
if (regex.test(document.f.nm.value)) {
//document.getElementById("notification").innerHTML = "Watching.. Everything is Alphabet now";
return true;
} else {
document.getElementById("notification").innerHTML = "Alphabets Only";
return false;
}
}
You can use HTML5 pattern attribute to do this:
<form>
<input type='text' pattern='[A-Za-z\\s]*'/>
</form>
If the user enters an input that conflicts with the pattern, it will show an error dialogue automatically.
You can try:
function onlyAlphabets(e, t) {
return (e.charCode > 64 && e.charCode < 91) || (e.charCode > 96 && e.charCode < 123) || e.charCode == 32;
}
:::::HTML:::::
<input type="text" onkeypress="return lettersValidate(event)" />
Only letters no spaces
::::JS::::::::
// ===================== Allow - Only Letters ===============================================================
function lettersValidate(key) {
var keycode = (key.which) ? key.which : key.keyCode;
if ((keycode > 64 && keycode < 91) || (keycode > 96 && keycode < 123))
{
return true;
}
else
{
return false;
}
}
Related
I have a textfield takes only letters, I want if I pressed (a) I get (b) and if I pressed (b) get (c)...etc, if I pressed (z) get alert("there is no letters after")
<input type="number" id="example" onkeypress="return numbersKey(event)">
<p id="demo"></p>
<input type="text" id="example2" onkeypress="return lettersOnly(event)">
<script>
var myinput = document.getElementById('example'),
myp = document.getElementById('demo');
function numbersKey(evt) {
// Only ASCII charactar in that range allowed
var ASCIICode = event.keyCode;
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
return false;
return true;
};
}
function lettersOnly()
{
// Only ASCII character in that range allowed
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8){
return String.fromCharCode(event.keyCode + 1);
}
else
return false;
}
Paste this complete code and run it once to see.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="example2" onkeypress="lettersOnly(event)">
<p id="demo"></p>
</body>
<script>
function lettersOnly(event) {
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8){
if(charCode == 90 || charCode == 122){
document.getElementById('demo').innerHTML = "There's no letter after";
}
else{
document.getElementById('demo').innerHTML = String.fromCharCode(event.keyCode + 1);
}
}
else{
document.getElementById('demo').innerHTML = "Not Letter";
}
}
</script>
</html>
I have created a function by JavaScript to accept alphabetical letters only in an input text field but the code doesn't work
function isLetter(event) {
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123)) {
return true;
} else {
return false;
}
}
<input type="text" id="lettersInput" maxlength="26" onkeypress="return isLetter(event)" class="Js-LettersEncode">
try with this oninput="this.value = this.value.replace(/[^A-Z, ^a-z]/, '')"
<input type="text" class="typing1" name="txt1" id="t1" oninput="this.value = this.value.replace(/[^A-Z, ^a-z]/, '')" maxlength="26" />
I am using following code in my-eclipse IDE.
<html>
<head>
<script>
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
return true;
}
}
</script>
</head>
<body>
<input name="form_number" onkeypress="return isNumberKey(event)" type="text" maxlength="4">
</body>
</html>
This code does not return the proper output when testing on my built-in browser in my IDE.
I tried to run this snippet on IE (thus using an external browser) and everything seems to work just fine. I feel like there are not mistakes on my code, but I might be wrong. Is my code wrong or is this issue browser related ?
Use parenthesis and try
if (charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
}
else{
return true;
}
You can try below code snippet. it's same as Click
<script type="text/javascript">
function myKeyPress(e){
var keynum;
if(window.event) { // IE
keynum = e.keyCode;
} else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
if (keynum > 31 && (keynum < 48 || keynum > 57))
return false;
return true;
}
</script>
<form>
<input type="text" onkeypress="return myKeyPress(event)" />
</form>
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
$('input.facebookUrl').keyup(function(){
if (
($(this).val().length > 0) && ($(this).val().substr(0,24) != 'http://www.facebook.com/')
|| ($(this).val() == '')
){
$(this).val('http://www.facebook.com/');
}
});
<table align="center">
<tr>
<td>
<input name="firstname" class="text_area" maxlength=20 placeholder="Name" type="text" onKeyPress="return onlyAlphabets(event,this)" required id="ValidName" value="" />
</td>
<tr>
<td>
<input type="text" onkeypress="return isNumber(event)" id="volpincode" maxlength=7 name="pincode" value="" required placeholder="Pincode" class="text_area">
</td>
<td><input style="width:300px" type="text" onkeypress="return keyup(event)" class="facebookUrl" name="facebook" value="http://www.facebook.com/$facebook"></td>
<td>
<input style="width:30px" disabled="disabled" type="text" name="facebook" value="+91" />
</td>
</tr>
</tr>
</table>
I am trying to validate the Name and Pin code, as such that in the NAME field only the alphabets have to enter not any other characters and In Pincode only numbers should enter. The form is working in Google chrome as fine, but firefox when i enter and try to delete the text in text field, the characters are not getting deleted.
To validate only alphabets for Name use below code:
$(document).on("keydown", "#NametextboxID", function (e) {
if (e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key == 9))) {
e.preventDefault();
}
}
});
To validate only numbers for Pin use below code:
$(document).on("keydown", "#PinId", function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
e.preventDefault(); // Prevent character input
} else {
var n = e.keyCode;
if (!((n == 8) // backspace
|| (n == 46) // delete
|| (n >= 35 && n <= 40) // arrow keys/home/end
|| (n >= 48 && n <= 57) // numbers on keyboard
|| (n >= 96 && n <= 105)
|| (n == 9)) // number on keypad
) {
e.preventDefault();
// alert("in if");
// Prevent character input
}
}
});
Add one more condition to the "onlyAlphabets function" for the name field.
if (charCode == 8 || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
JS Fiddle Link
How can I restrict entering special characters in the text box (txt_edition) by editing below code for validation? I want only numbers to be entered.
<script>
function validateForm()
{
var x = document.forms["frm_bokAdd"]["txt_edition"].value;
if (x==null || x=="")
{
alert("Edition must be filled out");
return false;
}
</script>
Below is my form
<form name="frm_bokAdd" action ="#" method="post" onsubmit="return validateForm()" >
<table border="0" align="center">
<tr><td> <input type="text" name="txt_edition" ></td></tr>
<tr><td> <input type="submit" name="bookIns_submit" value="Add"></td></tr>
</table>
</form>
can use this
HTML
<input type="text" onkeypress="return isNumber(event)" >
JS(at end of Body )
function isNumber(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
DEMO is Here
How can I restrict entering special characters in the text box (txt_edition)
Don't. Allow users to arrive at a valid value any way they like, you really only care that the value is valid when it's sent to the server, and even then you should validate there too.
by editing below code for validation? I want only numbers to be entered.
Just test when the form is submitted, passing a reference to the form in the call:
<form ... onsubmit="return validateForm(this)" >
and the function:
function validateForm(form) {
var value = form.txt_edition.value;
if (/\D/.test(value) || value == '') {
alert("Edition must be filled out and contain only numbers");
return false;
}
}
use regex.
if (x.match(/^[0-9]*\.[0-9]*$/) !== null) {
//text is only numbers (use /^[0-9]*$/ for integers)
}
Try it
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-size: 9pt;
font-family: Arial;
}
</style>
</head>
<body>
Alphanumeric value:
<input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;"
onpaste="return false;" />
<span id="error" style="color: Red; display: none">* Special Characters not allowed</span>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
specialKeys.push(9); //Tab
specialKeys.push(46); //Delete
specialKeys.push(36); //Home
specialKeys.push(35); //End
specialKeys.push(37); //Left
specialKeys.push(39); //Right
function IsAlphaNumeric(e) {
var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
</body>
</html>
Try to use regular expression -
var edition = document.getElementById('txt_edition').value;
outputVal = edition.replace(/[^0-9a-zA-Z]/g,"");
if (edition != outputVal) {
return false;
}
You can restrict the key press like below,
function restrict_letters(e) {
var keyCode = e . keyCode == 0 ? e . charCode : e . keyCode;
// only 0 to 9
if (keyCode < 48 && keyCode > 57) {
return false;
}
}
you can get more key codes in here.
Also change the html function call like below,
<input type="text" onkeypress="return restrict_letters(event)">
Note: function call need to give for the input field not for the form submit.
To allow user to enter only number and dot. Use this regular expression
function NumAndTwoDecimals(event , obj){
reg = /[^0-9.,]/g;
obj.value = obj.value.replace(reg,"");
}
SEE DEMO HERE
HTML code is
<input id="txtId" type="text" onkeyup="NumAndTwoDecimals(event , this);"></input>
To restrict user to enter only two number after '.' operator use
function NumAndTwoDecimals(e , field) {
var val = field.value;
var re = /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)$/g;
var re1 = /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)/g;
if (re.test(val)) {
//do something here
} else {
val = re1.exec(val);
if (val) {
field.value = val[0];
} else {
field.value = "";
}
}
}
SEE DEMO HERE