Alphanumeric Validation in JavaScript
In this tutorials we will discuss about alphanumeric validation in JavaScript. Sometimes it may occur when user have to fill character or digit in more than one field. So we will write a code to validate a form which can accept only character and digit in java Script. Alphanumeric validation means a field in the form can accept only numbers or characters other than that will not be accepted. In this type of validation you can input only the characters in the name field , number in the registration field, or a combination of number and characters in id field but no special symbol. Let us imagine you have created a text box in which only characters are allowed. So, if you will try to enter the name in digit then that would be a wrong input because name could not in digit that you know.
Example : Using this example we will create a html form in which we have created a text box named registration number in which we have validated it using JavaScript. When the user try to input other then number or character then a alert box will display the message "Please input number or chacracter" otherwise it will display " Your registration number is correct". Now here is the code for the alphanumeric validation
<!DOCTYPE html>
<html lang="en">
<head> <script type="text/javascript">
function alphanumeric(txt)
{
var letters = /^[0-9a-zA-Z]+$/;
if(txt.value.match(letters))
{
alert('Your registration is correct ');
document.form1.text1.focus();
return true;
}
else
{
alert('Please input alphanumeric characters only');
return false;
}
}
</script>
<meta charset="utf-8">
<title>JavaScript alphanumeric validation</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body bgcolor="EEECCE">
<div class="mail">
<h2>Alphanumeric Validation in JavaScript</h2>
<form name="form1" >Enter numbers and alphabets only.
<input type='text' name='text1'/>
<input type="submit" name="submit" value="Submit" onclick="alphanumeric(document.form1.text1)" />
</form>
</div>
</script>
</body>
</html>
Output : When the user input wrong registration number then the output will be as follows:
And, when the user input the correct registration number then the output is as follows:
