Hello, all. I'm currently trying to write a script that will perform
form validation upon submission. I know that more validation should be
performed on the server's side...this is just a test to see if I can
get the client side to work.
My problem is that I'm trying to make a validator that is 100%
separated from the XHTML code. I don't even want an event handler
assignment in the form. Unfortunately, I can't see how to grab a hold
of the form and pass it down to my subroutines. The code I'm using,
which is all placed in a seperate .js file, is below:
var W3CDOM = (document.creat eElement && document.getEle mentsByTagName) ;
function init(){
if (!W3CDOM) return;
var inputform = document.getEle mentById('input form');
inputform.onsub mit = validate;
}
function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);
if(evt){
var elem = (event.target) ? event.target : ((event.srcElem ent) ?
event.srcElemen t : null);
if(elem){
if(isNotEmpty(e lem.name)){
if(isName(elem. name)){
if(isNotEmpty(e lem.password)){
if(len16(elem.p assword)){
if(isNotEmpty(e lem.email)){
if(validEmail(e lem.email)){
return true;
}
}
}
}
}
}
}
}
return false;
}
function isNotEmpty(elem ){
str = elem.value;
re = /.+/;
if(!str.match(r e)){
return false;
alert(elem + " is empty!");
}
else{
return true;
}
}
function isName(elem){
str = elem.value;
re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;
if(!str.match(r e)){
return false;
alert(elem + " is not a name!");
}
else{
return true;
}
}
function len16(elem){
str = elem.value;
re = /\b.{16}\b/;
if(!str.match(r e)){
return false;
alert("Your password is not 16 characters long!");
}
else{
return true;
}
}
function validEmail(elem ){
str = elem.value;
re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if(!str.match(r e)){
return false;
alert("You did not enter a valid e-mail address!");
}
else{
return true;
}
}
window.onload = init;
My XHTML is as follows:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script type="text/javascript" src="validatefo rm.js"></script>
<style type="text/css">
form p label {
font: bold 1em Arial, Helvetica, sans-serif;
float: left;
width: 30%;
}
form p {
clear: left;
margin: 0;
padding: 5px 0 0 0;
}
input.txt {
width: 200px;
}
fieldset.narrow {
width: 450px;
}
</style>
</head>
<body>
<form name="inputform " id="inputform" method="post" action="">
<fieldset class="narrow"> <legend>Pleas e input your
information</legend>
<p><label for="name">Name :</label><input id="name" type="text"
class="txt" /></p>
<p><label for="password"> Password:</label><input id="password"
type="password" class="txt" /></p>
<p><label for="email">E-mail Address:</label><input id="email"
type="text" class="txt" /></p>
<p><input type="submit" name="submit" id="submit" value="Submit"
/></p>
</fieldset>
</form>
</body>
</html>
Like I said before, it doesn't appear that my script is getting the
form as I don't even get the alert dialogue boxes to popup when I try
submitting an empty form. Any ideas on what I'm doing wrong?
Thanks. :)
