w3resource

JavaScript: HTML Form - checking for numbers and letters

Checking for numbers and letters

Sometimes situations arise ( suppose a user id, password or a code) when the user should fill a single or more than one field with alphabet characters (A-Z or a-z) and numbers (0-9) in an HTML form. You can write a JavaScript form validation script to check whether the required field(s) in the HTML form contains only letters and numbers.

Javascript function to check if a field input contains letters and numbers only

// Function to check letters and numbers
function alphanumeric(inputtxt)
{
 var letterNumber = /^[0-9a-zA-Z]+$/;
 if((inputtxt.value.match(letterNumber)) 
  {
   return true;
  }
else
  { 
   alert("message"); 
   return false; 
  }
  }
  
  

To get a string contains only letters and numbers (i.e. a-z, A-Z or 0-9) we use a regular expression /^[0-9a-zA-Z]+$/ which allows only letters and numbers. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.+

Flowchart:

Flowchart: JavaScript - checking for numbers and letters

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking all letters and numbers</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter your Registration Number and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers and alphabets only.</li>
<li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="alphanumeric(document.form1.text1)" /></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="check-letters-numbers.js"></script>
</body>
</html>

Javascript code

function alphanumeric(inputtxt)
{ 
var letters = /^[0-9a-zA-Z]+$/;
if(inputtxt.value.match(letters))
{
alert('Your registration number have accepted : you can try another');
document.form1.text1.focus();
return true;
}
else
{
alert('Please input alphanumeric characters only');
return false;
}
}

CSS Code

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

View the example in the browser

Practice the example online

See the Pen letters-numbers-field-1 by w3resource (@w3resource) on CodePen.


file_download Download the validation code from here.

Other JavaScript Validation :

Previous: JavaScript: HTML Form validation - checking for Floating point numbers
Next: JavaScript: HTML Form - restricting the length



JavaScript: Tips of the Day

Returns the number of times a function executed per second. hz is the unit for hertz, the unit of frequency defined as one cycle per second

Example:

const tips_hz = (fn, iterations = 100) => {
  const before = performance.now();
  for (let i = 0; i < iterations; i++) fn();
  return (1000 * iterations) / (performance.now() - before);
};
// 10,000 element array
const numbers = Array(10000)
  .fill()
  .map((_, i) => i);

// Test functions with the same goal: sum up the elements in the array
const sumReduce = () => numbers.reduce((acc, n) => acc + n, 0);
const sumForLoop = () => {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  return sum;
};

// 'sumForLoop' is nearly 10 times faster
console.log(Math.round(tips_hz(sumReduce))); 
console.log(Math.round(tips_hz(sumForLoop)));

Output:

4004
990