This question already has answers here:
How can I validate an email address in JavaScript?
(79 answers)
Closed 8 years ago.
I am validating my form using javascript validation as whole validation is working fine but email validation is not working. My form code is as follows
<form method="post" action="contact.php" name="myForm" onsubmit="return validateForm()">
<h3>To know more contact us today.</h3>
<table>
<tr>
<td>Name:
<br />
<input id="name" name="name" type="text" />
</td>
</tr>
<tr>
<td>Contact No:
<br />
<input id="contact" name="contact" type="text" />
</td>
</tr>
<tr>
<td>Email:
<br />
<input id="email" type="text" name="email" />
</td>
</tr>
<tr>
<td>Address:
<br />
<textarea cols="34" id="address" name="address" type="text"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
and my javascript code is as follows
<script type="text/javascript">
function validateEmail() {
var emailID = document.["myForm"]["email"].value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2)) {
alert("Please enter correct email ID")
document.myForm.email.focus();
return false;
}
return (true);
}
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == null || x == "") {
alert("First name must be filled");
return false;
}
var x = document.forms["myForm"]["contact"].value;
if (x == null || x == "" || isNaN(document.myForm.contact.value) || document.myForm.contact.value.length != 10) {
alert("Contact Number Must be 10 Digits");
return false;
}
var x = document.forms["myForm"]["email"].value;
if (x == null || x == "") {
alert("Email is must");
return false;
}
else {
var ret = validateEmail();
if (ret == false) {
return false;
}
}
var x = document.forms["myForm"]["address"].value;
if (x == null || x == "") {
alert("Address cannot be empty");
return false;
}
return (true);
}
</script>
var emailID = document.["myForm"]["email"].value;
^^
Syntax error. Dot-notation or Square-bracket-notation. Pick only one (per property).
I'm surprised that Firebug / Chrome Developer Tools / Dragonfly / etc didn't give you a clear pointer to that when you were testing.
Related
<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var status = true;
var f = document.forms["myForm"]["fname"];
var l = document.forms["myForm"]["lname"];
var a = document.forms["myForm"]["age"];
var g = document.forms["myForm"]["gender"];
var m = document.forms["myForm"]["mobile"];
var u = document.forms["myForm"]["uname"];
if (f.value == "") {
document.getElementById("fname-error").innerHTML = "Please Enter your First
Name";
document.getElementById("fname-error").style.color = "Red";
status = false;
} else {
document.getElementById("fname-error").innerHTML = "Valid First Name";
document.getElementById("fname-error").style.color = "Green";
status = true;
}
if (l.value == "") {
document.getElementById("lname-error").innerHTML = "Please Enter your Last
Name";
document.getElementById("lname-error").style.color = "Red";
status = false;
} else {
document.getElementById("lname-error").innerHTML = "Valid Last Name";
document.getElementById("lname-error").style.color = "Green";
status = true;
}
if (a.value == "") {
document.getElementById("age-error").innerHTML = "Please Enter your age";
document.getElementById("age-error").style.color = "Red";
status = false;
} else {
document.getElementById("age-error").innerHTML = "Age Selected";
document.getElementById("age-error").style.color = "Green";
status = true;
}
if (g.value == "") {
document.getElementById("gender-error").innerHTML = "Please select your
gender";
document.getElementById("gender-error").style.color = "Red";
status = false;
} else {
document.getElementById("gender-error").innerHTML = "Gender Selected";
document.getElementById("gender-error").style.color = "Green";
status = true;
}
if (m.value.length < 10 || m.value.length > 10) {
document.getElementById("mobile-error").innerHTML = "Please Enter a valid
Mobile Number";
document.getElementById("mobile-error").style.color = "Red";
status = false;
} else {
document.getElementById("mobile-error").innerHTML = "Valid Mobile Number";
document.getElementById("mobile-error").style.color = "Green";
status = true;
}
if (u.value == "") {
document.getElementById("uname-error").innerHTML = "Please Choose a
Username";
document.getElementById("uname-error").style.color = "Red";
status = false;
} else {
document.getElementById("uname-error").innerHTML = "Valid Username";
document.getElementById("uname-error").style.color = "Green";
status = true;
}
return true;
}
function checkPass(passId) {
if (/^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{6,16}$/.test(passId)) {
document.getElementById("pass1-error").innerHTML = "You have entered valid
Password.";
document.getElementById("pass1-error").style.color = "Green";
return true;
}
return false;
}
function ValidatePassid() {
var passID = document.forms["myForm"]["passid1"];
if ((passID.value == null) || (passID.value == "")) {
document.getElementById("pass1-error").innerHTML = "Please Enter your
password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
if (checkPass(passID.value) == false) {
passID.value = "";
document.getElementById("pass1-error").innerHTML = "Invalid Password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
return true;
}
function Validate() {
var pass1 = document.forms["myForm"]["passid1"];
var pass2 = document.forms["myForm"]["passid2"];
if (pass1.value != pass2.value) {
document.getElementById("pass2-error").innerHTML = "Passwords do not
match.";
document.getElementById("pass2-error").style.color = "Red";
return false;
} else {
document.getElementById("pass2-error").innerHTML = "Passwords match.";
document.getElementById("pass2-error").style.color = "Green";
return true;
}
return true;
}
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)) {
document.getElementById("email-error").innerHTML = ("You have entered a
valid email");
document.getElementById("email-error").style.color = "Green";
return true;
}
return false;
}
function ValidateEmail() {
var emailID = document.forms["myForm"]["email"];
if ((emailID.value == null) || (emailID.value == "")) {
document.getElementById("email-error").innerHTML = "Please Enter your Email
ID";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
if (checkEmail(emailID.value) == false) {
emailID.value = "";
document.getElementById("email-error").innerHTML = "Invalid Email Adderess";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" id="MyForm">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td>
<input type="text" name="fname" />
<div id="fname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type="text" name="lname" />
<div id="lname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="number" name="age" minlength ="0" maxlength = "100"/>
<div id="age-error" class="error"></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input list="genders" name="gender" />
<datalist id="genders">
<option value="Male">
<option value="Female">
<option value="Other">
</datalist>
<div id="gender-error" class="error"></div>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td>
<input type="number" name="mobile" minlength="10" maxlength ="10"/>
<div id="mobile-error" class="error"></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="userid" name="uname" />
<div id="uname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="passid1" minlength="6" />
<div id="pass1-error" class="error"></div>
</td>
</tr>
<tr><td>Confirm Password:</td>
<td>
<input type="password" name="passid2" minlength="6"/>
<div id="pass2-error" class="error"></div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email" />
<div id="email-error" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2">
<button onlick="return !!(validateform() & ValidatePassid() &
Validate() & ValidateEmail())">Submit</button>
<span id="display">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
I should not use any server side languages since it is a school project, I tried to display the data using onclick but it is not working. Can any one solve this problem and guide me through it. Even if you suggest to use any server side languages I can't use them, because they didn't teach those. Only basic JavaScript can be used to dispaly the form values.
Use jQuery validation js...the prior reason for suggesting you is that you don't have to do manual code as that js will automatically track this.
https://jqueryvalidation.org/
Hope, this will help you.
The problem is that the code works absolutely fine for displaying the validation errors once I click on the submit button, but after the messages are displayed.. and again when I click on the submit button (without reloading ie. the error messages are still on the display), it redirects to the success page even though it has error messages.
Have a look at the code:
var flag = 0;
function username() {
usrn = document.form1.txt.value;
if (usrn == "") {
document.getElementById("user").innerHTML = "Please enter a username";
flag = 1;
} else if (usrn.length < 8) {
document.getElementById("user").innerHTML = "minimum 8 characters required";
flag = 1;
}
}
function password() {
pass = document.form1.pass.value;
cpass = document.form1.cpass.value;
if (pass == "") {
document.getElementById("password").innerHTML = "Please enter a password";
flag = 1;
} else if (pass.length < 8) {
document.getElementById("password").innerHTML = "minimum 8 characters required";
flag = 1;
} else if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function cpassword() {
cpass = document.form1.cpass.value;
pass = document.form1.pass.value;
if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function email() {
email = document.form1.em.value;
if (email == "") {
document.getElementById("emailid").innerHTML = "Please enter Email-ID";
flag = 1;
}
}
function check(form) {
flag = 0;
username();
password();
email();
if (flag == 1) {
return false;
} else {
return true;
}
}
<form name="form1" action="success.html" onSubmit="return check(this)" method="post">
<table cellpadding="10">
<tr>
<caption>FILL FORM</caption>
</tr>
<tr>
<td>
<label for="txt">Enter Username</label>
</td>
<td>
<input type="text" id="txt">
<div class="error" id="user" onBlur="username()"></div>
</td>
</tr>
<tr>
<td>
<label for="pass">Enter Password</label>
</td>
<td>
<input type="password" id="pass" onBlur="password()">
<div class="error" id="password"></div>
</td>
</tr>
<tr>
<td>
<label for="cpass">Confirm Password</label>
</td>
<td>
<input type="password" id="cpass" onBlur="password()">
<div class="error" id="cpassword"></div>
</td>
</tr>
<tr>
<td>
<label for="em">Enter Email-ID</label>
</td>
<td>
<input type="email" id="em" onBlur="email()">
<div class="error" id="emailid"></div>
</td>
</tr>
<tr>
<td colspan=2>
<button type="submit" class="btn">Submit</button>
</td>
</tr>
</table>
</form>
thank you
Here is a snippet to work with.
There are few issues in the code:
In the function email(), you are assigning value to the email variable.
There are many variables created NOT within the function scope.
More optimizations can be made rather than using global functions and variables which will make the code more readable and maintainable.
var flag = 0;
function username() {
var usrn = document.form1.txt.value;
if (usrn == "") {
document.getElementById("user").innerHTML = "Please enter a username";
flag = 1;
} else if (usrn.length < 8) {
document.getElementById("user").innerHTML = "minimum 8 characters required";
flag = 1;
}
}
function password() {
var pass = document.form1.pass.value;
var cpass = document.form1.cpass.value;
if (pass == "") {
document.getElementById("password").innerHTML = "Please enter a password";
flag = 1;
} else if (pass.length < 8) {
document.getElementById("password").innerHTML = "minimum 8 characters required";
flag = 1;
} else if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function cpassword() {
var cpass = document.form1.cpass.value;
var pass = document.form1.pass.value;
if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function email() {
var emailValue = document.form1.em.value;
if (emailValue == "") {
document.getElementById("emailid").innerHTML = "Please enter Email-ID";
flag = 1;
}
}
function check(form) {
flag = 0;
username();
password();
email();
if (flag == 1) {
console.log("False");
return false;
} else {
console.log("True");
return true;
}
}
<form name="form1" action="success.html" onsubmit="return check(this)" method="post">
<table cellpadding="10">
<tr>
<caption>FILL FORM</caption>
</tr>
<tr>
<td>
<label for="txt">Enter Username</label>
</td>
<td>
<input type="text" id="txt">
<div class="error" id="user" onBlur="username()"></div>
</td>
</tr>
<tr>
<td>
<label for="pass">Enter Password</label>
</td>
<td>
<input type="password" id="pass" onBlur="password()">
<div class="error" id="password"></div>
</td>
</tr>
<tr>
<td>
<label for="cpass">Confirm Password</label>
</td>
<td>
<input type="password" id="cpass" onBlur="password()">
<div class="error" id="cpassword"></div>
</td>
</tr>
<tr>
<td>
<label for="em">Enter Email-ID</label>
</td>
<td>
<input type="email" id="em" onBlur="email()">
<div class="error" id="emailid"></div>
</td>
</tr>
<tr>
<td colspan=2>
<button type="submit" class="btn">Submit</button>
</td>
</tr>
</table>
</form>
whenever there is validation error. return false from the function. it should fix this.
The following code gives a simple sign up form and uses JavaScript to validate the user's input. When run in chrome, there are alerts as expected. But in IE and Firefox, the page only goes to adduser.php without alerts even nothing has been entered into the form.
CSS
.signup {
font: normal 14px helvetica;
color: #000000;
border: solid 6px #555555;
}
JS
function validate() {
var fail = "";
fail += validateForename(document.getElementById("forename").value);
fail += validateSurname(document.getElementById("surname").value);
fail += validateUsername(document.getElementById("username").value);
fail += validatePassword(document.getElementById("password").value);
fail += validateAge(document.getElementById("age").value);
fail += validateEmail(document.getElementById("email").value);
if (fail == "") return true;
else alert(fail);
return false;
}
function validateForename(str) {
if (str == "") return "No forename has been found\n";
return "";
}
function validateSurname(str) {
if (str == "") return "No surname has benn found\n";
return "";
}
function validateUsername(str) {
if (str == "") return "No username has been found\n";
if (str.length < 5) return "Username must be at least 5 characters\n";
if (/[^a-zA-Z0-9_-]/.test(str)) return "Only a-z, A-Z, 0-9, - and _ are allowed in username\n";
return "";
}
function validatePassword(str) {
if (str == "") return "Password can not be empty\n";
if (str.length < 6) return "Password must be at least 6 characters\n";
if (!/[0-9]/.test(str) || !/[a-z]/.test(str) || !/[A-Z]/.test(str)) return "Password must have at least one each of a-z, A-Z, 0-9\n";
return "";
}
function validateAge(str) {
if (isNaN(str)) return "No age has been found\n";
if (str < 18 || str > 110) return "Age must be between 18 and 110\n";
return "";
}
function validateEmail(str) {
if (str == "") return "No email address has been found\n";
if (!(str.indexOf('.') > 0 && str.indexOf('#') > 0) || /[^a-zA-Z0-9_-.#]/.test(str)) return "The email address is invalid\n";
return "";
}
HTML
<table class="signup" border="0" cellpadding="4" bgcolor="#eeeeee">
<th colspan="2" align="center">Sign Up</th>
<form method="post" action="adduser.php" onSubmit="return validate()">
<tr>
<td>Forname:</td>
<td>
<input type="text" name="forename" id="forename" maxlength="32" />
</td>
</tr>
<tr>
<td>Surname:</td>
<td>
<input type="text" name="surname" id="surname" maxlength="32" />
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="text" name="username" id="username" maxlength="16" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" maxlength="12" />
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="text" name="age" id="age" maxlength="3" />
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text" name="email" id="email" maxlength="64" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Signup" />
</td>
</tr>
</form>
</table>
The problem is on this line (55):
if (!(str.indexOf('.') > 0 && str.indexOf('#') > 0) || /[^a-zA-Z0-9_-.#]/.test(str)) return "The email address is invalid\n";
The character class you declared is invalid:
/[^a-zA-Z0-9_-.#]/ //--> Wrong
/[^a-zA-Z0-9_.#-]/ //--> Right
The browser tries to interpret _-. as a range of characters between _ and ., and sorely fails.
The following regex (line 55) produces an error in Firebug (SyntaxError: invalid range in character class) :
/[^a-zA-Z0-9_-.#]/
Try this one instead :
/[^\w-]+/gi
Works for me now in FF and IE 11.
This regular expression object is not very reliable:
/[^a-zA-Z0-9_-.#]/
Chrome tolerates that, but Firefox doesn't understand that _-. is not a character range, like a-z. You can move - to the very end to avoid ambiguity. Final regexp becomes (i means case insensitive match)
/[^a-z0-9_.#-]/i
bit of a noob with form validation. I'm trying to get this form to validate on the required fields, and something's amiss. Here's what I'm working with:
html:
<form action="../visit/thankyou.html" method="post" id="vsurvey">
<input type="hidden" name="id" value="503" />
<fieldset>
<legend>Group and Coordinator Information</legend>
<label><span>Group Leader Name<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8149" />
</label>
<label><span>Email<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8155" />
</label>
<label><span>Phone<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8156" />
</label>
<label><span>School/Organization<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8159" />
</label>
<label><span>Program</span>
<input type="text" name="question_8180" />
</label>
<label><span>Grade(s)</span>
<input type="text" name="question_8181" />
</label>
<label><span>Number of Participants<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8182" />
</label>
</fieldset>
<fieldset>
<label><span>Preferred Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8185" name="question_8185" />
</label>
<label><span>Second Preference Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8186" name="question_8186" />
</label>
<label><span>Third Preference Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8187" name="question_8187" />
</label>
<label>Special Accommodations
<input type="text" name="question_8174" />
</label>
</fieldset>
<label>What is the purpose or desired outcome of this visit?
<textarea name="question_13026"></textarea>
</label>
<label>How did you learn about our Group Visit Program?
<textarea name="question_8176"></textarea>
</label>
<label>Comments
<textarea name="question_8184"></textarea>
</label>
<input type="submit" id="sbutton" value="Submit Request" />
</form>
js:
function validateForm() {
var x = document.forms["vsurvey"]["question_8149"].value;
if (x == null || x == "") {
alert("Please fill in the Group Leader's name.");
return false;
}
var x = document.forms["vsurvey"]["question_8155"].value;
if (x == null || x == "") {
alert("Please fill in the email field.");
return false;
}
var x = document.forms["vsurvey"]["question_8156"].value;
if (x == null || x == "") {
alert("Please fill in the phone field.");
return false;
}
var x = document.forms["vsurvey"]["question_8159"].value;
if (x == null || x == "") {
alert("Please fill in the School/Organization field.");
return false;
}
var x = document.forms["vsurvey"]["question_8182"].value;
if (x == null || x == "") {
alert("Please indicate the number or participants.");
return false;
}
var x = document.forms["vsurvey"]["question_8185"].value;
if (x == null || x == "") {
alert("Please enter your preferred date.");
return false;
}
var x = document.forms["vsurvey"]["question_8186"].value;
if (x == null || x == "") {
alert("Please enter your second date preference.");
return false;
}
var x = document.forms["vsurvey"]["question_8187"].value;
if (x == null || x == "") {
alert("Please enter your third date preference.");
return false;
}
}
http://jsfiddle.net/blackessej/9a6BJ/1/
Currently the form submits the info anyway, but without sending the user to the thankyou page, if all required fields aren't filed in. If all required fields are filed, the thankyou page gets called.
You're not calling validatorForm. Your input button needs to be the following
<input type="submit" id="sbutton" value="Submit Request" onclick="return validateForm()" />
Or use the onsubmit event of your form
<form action="../visit/thankyou.html" method="post" id="vsurvey" onsubmit="return validateForm()">
You need to create an onSubmit event to call validateForm:
document.getElementById('vsurvey').onsubmit = validateForm;
I am only GCSE level and I need a text box in my code to only have 4 characters. I have made it a max of 4 but I need it to have a minimum of 4 aswell. I also made it only accept numbers. I am not using HTML 5 at my school.
This is my whole code:
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject. \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.ExamNumber.value=="") {
msg+="You must enter your exam number. \n";
document.ExamEntry.ExamNumber.focus();
document.getElementById('ExamNumber').style.color="red";
result = false;
}
if(document.ExamEntry.ExamNoLen.value.length <4) {
msg+="Your eaxm nuber must be 4 digits long. \n";
document.ExamEntry.ExamNumber.focus();
document.getElementById('ExamNumber').style.color="red";
result = false;
}
checkInput(elem){
if(elem.value.length != 4){
alert("This value needs to be 4 characters long!");
elem.value = ""; // Reset the textbox
}
else{
alert("This value is 4 characters long.");
}
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="ExamNumber">Exam Number </td>
<td>
<input name="ExamNumber" type="text"
onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )"
maxlength="4" onblur="checkInput(this)" />
</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
Well you can't have a minlength because your users are going to need to type 1,2 and 3 characters to get to 4. (Unless you apply some sort of input mask which is more advanced). But you can check that it is 4 characters long when it is blurred..
<input name="ExamNumber" type="text" onblur="checkInput(this)" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )" maxlength="4" />
And then a simple JavaScript function..
function checkInput(elem){
if(elem.value.length != 4){
alert("This value needs to be 4 characters long!");
elem.value = ""; // Reset the textbox
}
else{
alert("This value is 4 characters long.");
}
}