...

View Full Version : Need help with form validation using regular expression and test method



Dave003
06-24-2006, 11:17 AM
This is my first post here and my first week learning Javascript so I hope it doesnt suck too much.

I am trying to get a form to validate with regular expressions using the test method, this code works


else if (! /.@.+\../.test(email))
// email doesn't match
{
alert ('Please enter your email');
return false;
}
else if (! /^[0-9]{4}$/.test(postcode))
// postcode doesn't match
{
alert ('Please enter your postcode');
return false;
}

but this code doesnt


else if (! /^.w.+\.d$/.test(address))
// if alphanumeric (words and numbers only) does match
{
alert ('Please enter your address');
return false;
}
else if (! /^w$/.test(suburb))
// if alpha (words only) does match
{
alert ('Please enter your suburb');
return false;
}

Here is an example of the whole page using the suburb test statement

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
//Check all submitted details
function SubmitCheck()
{
var fullName;
var address;
var suburb;
var postcode;
var email;
var order;
fullName = document.details.fullname.value;
address = document.details.address.value;
suburb = document.details.suburb.value;
postcode = document.details.postcode.value;
email = document.details.email.value;
order = document.details.order.value;

if (fullName == "")
{
alert ('Please enter your full name');
return false;
}
else if (address == "")
{
alert ('Please enter your street number and street address');
return false;
}
else if (! /^w/.test(suburb))
{
alert ('Please enter your suburb');
return false;
}
else if (! /^[0-9]{4}$/.test(postcode))
{
alert ('Please enter your postcode');
return false;
}
else if (! /.@.+\../.test(email))
{
alert ('Please enter your email address');
return false;
}
else if (order == "")
{
alert ('Please enter your order details');
return false;
}
else
{
return true;
}
}
// -->
</script>
</head>

<body>
<form method="post" name="details" onsubmit="return SubmitCheck()" action="submit.html">
<br />
<table width="516" cellpadding="1" cellspacing="1">

<tr>
<th width="109" scope="col">&nbsp;</th>
<th width="222" scope="col">&nbsp;</th>
<th width="109" scope="col">&nbsp;</th>
<th width="61" scope="col">&nbsp;</th>
</tr>
<tr>
<td bgcolor="#99CC00">* Name: </td>
<td bgcolor="#CCCCCC"><input name="fullname" type="text" id="fullname" value="" size="37" /></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#99CC00">* Address:</td>
<td bgcolor="#CCCCCC"><input type="text" name="address" size="37" value="" /></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#99CC00">* Suburb:</td>
<td bgcolor="#CCCCCC"><input name="suburb" type="text" id="suburb" size="37" /></td>
<td bgcolor="#99CC00">* Postcode:</td>
<td bgcolor="#CCCCCC"><input name="postcode" type="text" id="postcode" value="" size="10" maxlength="4" /></td>
</tr>
<tr>
<td bgcolor="#99CC00">* Email </td>
<td bgcolor="#CCCCCC"><input name="email" type="text" id="email" size="37" /></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td height="21" bgcolor="#99CC00">* Order: </td>
<td rowspan="2" bgcolor="#CCCCCC"><textarea name="order" cols="23.1" rows="4" id="order"></textarea></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
</table>
<br />
<br />
<input type="submit" value="Submit Details" /> <input type="reset" value="Reset Details" />
</form>

</body>
</html>


Here is an example that works using test regular expressions for the postcode and email fields


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
//Check all submitted details
function SubmitCheck()
{
var fullName;
var address;
var suburb;
var postcode;
var email;
var order;
fullName = document.details.fullname.value;
address = document.details.address.value;
suburb = document.details.suburb.value;
postcode = document.details.postcode.value;
email = document.details.email.value;
order = document.details.order.value;

if (fullName == "")
{
alert ('Please enter your full name');
return false;
}
else if (address == "")
{
alert ('Please enter your street number and street address');
return false;
}
else if (suburb == "")
{
alert ('Please enter your suburb');
return false;
}
else if (! /^[0-9]{4}$/.test(postcode))
{
alert ('Please enter your postcode');
return false;
}
else if (! /.@.+\../.test(email))
{
alert ('Please enter your email address');
return false;
}
else if (order == "")
{
alert ('Please enter your order details');
return false;
}
else
{
return true;
}
}
// -->
</script>
</head>

<body>
<form method="post" name="details" onsubmit="return SubmitCheck()" action="submit.html">
<br />
<table width="516" cellpadding="1" cellspacing="1">

<tr>
<th width="109" scope="col">&nbsp;</th>
<th width="222" scope="col">&nbsp;</th>
<th width="109" scope="col">&nbsp;</th>
<th width="61" scope="col">&nbsp;</th>
</tr>
<tr>
<td bgcolor="#99CC00">* Name: </td>
<td bgcolor="#CCCCCC"><input name="fullname" type="text" id="fullname" value="" size="37" /></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#99CC00">* Address:</td>
<td bgcolor="#CCCCCC"><input type="text" name="address" size="37" value="" /></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#99CC00">* Suburb:</td>
<td bgcolor="#CCCCCC"><input name="suburb" type="text" id="suburb" size="37" /></td>
<td bgcolor="#99CC00">* Postcode:</td>
<td bgcolor="#CCCCCC"><input name="postcode" type="text" id="postcode" value="" size="10" maxlength="4" /></td>
</tr>
<tr>
<td bgcolor="#99CC00">* Email </td>
<td bgcolor="#CCCCCC"><input name="email" type="text" id="email" size="37" /></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td height="21" bgcolor="#99CC00">* Order: </td>
<td rowspan="2" bgcolor="#CCCCCC"><textarea name="order" cols="23.1" rows="4" id="order"></textarea></td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#99CC00">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
</table>
<br />
<br />
<input type="submit" value="Submit Details" /> <input type="reset" value="Reset Details" />
</form>

</body>
</html>



Can anyone help me get this to work in exactly the same way as the existing postcode and email statements?

Cheers
Dave

Arty Effem
06-25-2006, 08:58 AM
else if (! /^.w.+\.d$/.test(address))
// if alphanumeric (words and numbers only) does match
That is looking for any single character followed by the letter w (lowercase) followed by one or more of any character followed by a period followed by the letter d (lowercase).

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:RegExp



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum