You'd do yourself some good learning about regular expressions.
Also, it's a bad idea to name form elements things that have meaning to the DOM. Such as calling one "name" when all elements have a name attribute. It confuses some browsers when you try to reference the form element. Plus, you have a function called "name". Confusing people who need to maintain code after you is not very nice.
Plus, this might additionally confuse a browser. When you reference "name", do you mean the attribute, the form field, or the function? At best, it's not a good programming practice. At worst, it will break something.
DOCTYPE and CSS are your friends.
You should put your HTML through a validator. AFAIK, there is no attribute "minlength" for a text field.
http://www.w3.org/TR/html401/interact/forms.html#h-17.4
onsubmit and method had double listings. You can't do that.
You test phone number for 10 chars, yet the initial value has more than that. Is the user supposed to enter 10 numbers or are they supposed to enter a formatted string (your initial value is already formatted and thus more than 10 characters)?
Hiding script is no longer needed. The last browser to not understand script elements was like Netscape 3.
I'm not sure what you mean about displaying the date - users have to enter it in a particular format, for the most part. You have to know how they entered it to know how to transform it. How would you know that they didn't enter it in dd/mm/yyyy format, as is so common in the UK?
I'll leave the date stuff up to you.
As to the rest...Here's how I would do this.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test 3 - JavaScript</title>
<script type="text/javascript">
function isBlank(field)
{
// True if val is whitespace only or empty.
var re = /\S+/;
return (re.test(field));
}
function checkName(field)
{
/* 5 to 15 alphanumeric characters, inclusive */
var re = /^\w{5,15}$/;
if (!re.test(field))
{
alert("The name field must be between 5 and 15 alphanumeric characters. ");
field.focus();
return false;
}
else return true;
}
function checkPsswd(field)
{
/* 5 to 15 characters, inclusive */
var re_num = /^\w{5,15}$/;
var re_case = /^\w*([a-z]+\w*[A-Z]+|[A-Z]+\w[a-z]+)\w*$/;
if (!re_num.test(field))
{
alert("The password field must be between 5 and 15 alphanumeric characters.");
field.focus();
return false;
}
if (!re_case.test(field))
{
alert("The password field must have at least one lower case letter and at least one upper-case letter.");
field.focus();
return false;
}
else return true;
}
function validate(frm)
{
if (isBlank(frm.uname.value) ||
isBlank(frm.psswd.value) ||
isBlank(frm.date.value) ||
isBlank(frm.phone.value))
{
alert("All fields are not entered");
frm.focus();
return false;
}
formatNumber(frm.phone.value);
return (checkName(frm.uname.value) &&
checkPsswd(frm.psswd.value))
}
function formatNumber(field)
{
/* if blank, don't do anything */
if (isBlank(field)) return;
/* user must enter 10 digits or a fully formatted number. If already formatted, exit. */
var re_digits = /^\d{10}$/;
var re_formatted = /^\(\d\d\d\) \d\d\d-\d\d\d\d$/;
if (re_formatted.test(field)) return;
/* got here, need to format */
// check is 10 digits
if (!re_digits.test(field))
{
alert("Phone number must be 10 digits or in the form (123) 555-5555");
return;
}
// okay, got 10 digits - format them to (123) 555-5555
var newNumber = "(" + field.substring(0,3) + ") " + field.substring(3,6) + "-" + field.substring(6,10);
field.value = newNumber;
}
</script>
</head>
<body>
* All fields MUST be completed.
<form name="frm1" method="get" action="" onsubmit="return validate(this);">
<p><strong>Name: </strong>
<input name="uname" type="text" id="uname" maxlength="15" onchange="checkName(this.value);">
(5-15 characters)<br>
<br>
<strong>Password:
<input name="psswd" type="password" id="psswd" maxlength="15" onchange="checkPsswd(this.value);">
<br>
<br>
Phone:
<input type="text" name="phone" value="(555) 555-1234" size="20" onchange="formatNumber(this.value);">
</strong>(10 digits)<strong><br>
<br>
Date: <input name="date" id="date" type="text"> <br>
<br>
<input type="submit" name="Submit" value="Submit">
</strong></p>
</form>
<br>
</body>
</html> 
Linear Mode
