This code is taken from Simply JavaScript book. It looks like it has a bug which is not described in Errata section of a book. This validation works perfectly well in IE but not in FireFox and I don’t know where there problem is.
Description of a problem: if you click Submit button, without filling out User name (see html mark up, please), an alert message will show up saying: “Please fill in this required field”. If an end user is pretty dumb and decides to hit Submit button again, for the second time, without entering any data in User name field, he will be taken to Email address field. So, basically User name is omitted from validation.
I think a problem might have to do with exec method, executed on the class string on the second Submit event. It behaves as if User name did not have any class, and therefore this field’s validation is omitted.
Can anybody help? Problem is encountered in Mozilla Firefox and Chrome. IE6 works just fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Reusable Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="formvalidation.css" />
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="formvalidation.js"></script>
</head>
<body>
<h1>A Form with Client-Side Validation</h1>
<form action="thanks.html" method="post">
<div>
<label for="user">User name:
<input type="text" class="red required" id="username" name="username" />
</label>
</div>
<div>
<label for="email">Email address:
<input type="text" class="email" id="email" name="email" />
</label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
var FormValidation =
{
init: function()
{
var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++)
{
Core.addEventListener(forms[i], "submit", FormValidation.submitListener);
}
},
rules:
{
required: /./,
requiredNotWhitespace: /\\S/,
positiveInteger: /^\\d*[1-9]\\d*$/,
positiveOrZeroInteger: /^\\d+$/,
integer: /^-?\\d+$/,
decimal: /^-?\\d+(\\.\\d+)?$/,
email: /^[\\w\\.\\-]+@([\\w\\-]+\\.)+[a-zA-Z]+$/,
telephone: /^(\\+\\d+)?( |\\-)?(\\(?\\d+\\)?)?( |\\-)?(\\d+( |\\-)?)*\\d+$/
},
errors:
{
required: "Please fill in this required field.",
requiredNotWhitespace: "Please fill in this required field.",
positiveInteger: "This field may only contain a positive whole number.",
positiveOrZeroInteger: "This field may only contain a non-negative whole number.",
integer: "This field may only contain a whole number.",
decimal: "This field may only contain a number.",
email: "Please enter a valid email address into this field.",
telephone: "Please enter a valid telephone number into this field."
},
submitListener: function(event)
{
var fields = this.elements;
for (var i = 0; i < fields.length; i++)
{
var className = fields[i].className;
var classRegExp = /(^| )(\\S+)\\b/g;
var classResult;
while (classResult = classRegExp.exec(className))
{
var oneClass = classResult[2];
var rule = FormValidation.rules[oneClass];
if (typeof rule != "undefined")
{
if (!rule.test(fields[i].value))
{
fields[i].focus();
alert(FormValidation.errors[oneClass]);
Core.preventDefault(event);
return;
}
}
}
}
}
};
Core.start(FormValidation);
