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:
HTML Code
JavaScript form validation - checking all letters and numbers
Enter your Registration Number and Submit
- *Enter numbers and alphabets only.
-
-
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 :
- Checking for non-empty
- Checking for all letters
- Checking for all numbers
- Checking for floating numbers
- Checking for letters and numbers
- Checking string length
- Email Validation
- Date Validation
- A sample Registration Form
- Phone No. Validation
- Credit Card No. Validation
- Password Validation
- IP address Validation
Previous: JavaScript: HTML Form validation - checking for Floating point numbers
Next: JavaScript: HTML Form - restricting the length
JavaScript: Tips of the Day
Spread operator
const user = { name: 'Owen', age: 21 };
const admin = { admin: true, ...user };
console.log[admin];
It's possible to combine objects using the spread operator .... It lets you create copies of the key/value pairs of one object, and add them to another object. In this case, we create copies of the user object, and add them to the admin object. The admin object now contains the copied key/value pairs, which results in { admin: true, name: "Owen", age: 21 }.
Ref: //bit.ly/323Y0P6
JavaScript : HTML Form validation - checking for password
Last update on August 19 2022 21:51:07 [UTC/GMT +8 hours]Sometimes a password validation in a form is essential. You can create a password in different ways, it's structure may be simple, reasonable or strong. Here we validate various type of password structure through JavaScript codes and regular expression.
- Check a password between 7 to 16 characters which contain only characters, numeric digits and underscore and first character must be a letter.
- Check a password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter.
- Check a password between 7 to 15 characters which contain at least one numeric digit and a special character.
- Check a password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character.
Following code blocks contain actual codes for the said validations. We have kept the CSS code part common for all the validations.
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;
}To check a password between 7 to 16 characters which contain only characters, numeric digits, underscore and first character must be a letter
To validate the said format we use the regular expression ^[A-Za-z]\w{7,15}$, where \w matches any word character [alphanumeric] including the underscore [equivalent to [A-Za-z0-9_]]. 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.
HTML Code:
title>JavaScript form validation - Password Checking - 1
Input Password and Submit [7 to 15 characters which contain only characters, numeric digits, underscore and first character must be a letter]
Chủ Đề