<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>as_validform demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*
These styles are required for the script
so remember to include them or you will
genereate script errors
*/
/*you must have errX style for each error message*/
#err0{color:white;font-weight:bold;}
#err1{color:white;font-weight:bold;}
#err2{color:white;font-weight:bold;}
#err3{color:white;font-weight:bold;}
#err4{color:white;font-weight:bold;}
#err5{color:white;font-weight:bold;}
#err6{color:white;font-weight:bold;}
#err7{color:white;font-weight:bold;}
#err8{color:white;font-weight:bold;}
/*NS4x Error Styles*/
#nserror{position:absolute;
top:0;
left:0;
width:140;
height:350;
visibility:hidden;
layer-background-color:red;
clip:rect(0,140,350,0) ;
}
#nserrortext{ position:absolute;
layer-background-color:#fffff5;
width:140;
height:350;
clip:rect(1,139,349,1);
}
.nscloseit {
font : normal 8pt verdana, sans-serif;
color : red;
background-color:#fffff5;
}
.nserrorhead {
font : bold 8pt verdana, sans-serif;
color : white;
}
.nserrorcontent {
font : normal 8pt verdana, sans-serif;
color : navy;
}
/*End ns error styles*/
/*END OF REQUIRED STYLES*/
/*this style is for the demo table */
.lcell, INPUT, TEXTAREA,SELECT {
font : normal 8pt verdana, sans-serif;
color : navy;
background-color : silver;
}
.rcell {
font : normal 8pt verdana, sans-serif;
color : navy;
background-color : white;
}
.tblborder{
font : bold 8pt verdana, sans-serif;
color : navy;
border-bottom : 1px solid #375BA3;
border-left : 1px solid #375BA3;
border-right : 1px solid #375BA3;
border-top : 1px solid #375BA3;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
padding-bottom : 5px;
background-color : #ffffff;
}
H3{
font : bold 14pt verdana, sans-serif;
color : red;
background-color : #ffffff;
text-align:center;
}
A{
font : bold 8pt verdana, sans-serif;
color : red;
background-color : #ffffff;
}
A:hover{
font : bold 8pt verdana, sans-serif;
color : navy;
background-color : #ffffff;
}
/*this style is for the demo table */
</style>
<script type="text/javascript" language="JavaScript" >
<!--
//#################################################################
//Edit these variable to suit
//#################################################################
//Build up the required fields array
//#################################################################
var validfields = new Array();
validfields[0] = "Your_Name";
validfields[1] = "email";
validfields[2] = "comments";
validfields[3] = "sex";
validfields[4] = "agree";
validfields[5] = "catname";
validfields[6] = "dogname";
validfields[7] = "phone";
validfields[8] = "date";
//#################################################################
//what type of field is it
//choices are
//txt = textbox or textarea
//radio = radio group
//chkbx = checkbox
//dropbox = select > option
//#################################################################
var fieldtype = new Array();
fieldtype[0] = "txt";
fieldtype[1] = "txt";
fieldtype[2] = "txt";
fieldtype[3] = "radio";
fieldtype[4] = "chkbx";
fieldtype[5] = "dropbox";
fieldtype[6] = "dropbox";
fieldtype[7] = "txt";
fieldtype[8] = "txt";
//#################################################################
//whats allowed in the field
//na = not applicable use for non txt validation
//asc = a-z A-Z 0-9 _ and space
//textonly = a-z A-Z - no spaces
//email = valid email address
//num = 0-9 and spaces
//numonly = 0-9 no spaces
//dateUK = date in the format dd/mm/yyyy
//dateUS = date in the format mm/dd/yyyy
//#################################################################
var fieldallow = new Array();
fieldallow[0] = "asc";
fieldallow[1] = "email";
fieldallow[2] = "asc";
fieldallow[3] = "na";
fieldallow[4] = "na";
fieldallow[5] = "na";
fieldallow[6] = "na";
fieldallow[7] = "num";
fieldallow[8] = "dateUK";
//#################################################################
//set this to the same value as the name of your form
//#################################################################
var formname = "hello";
//#################################################################
//Background colors
//bcol = should be the set the same as the page color
//bcolerr = if you want to change the background color when an error appears
//then set this to whatever color you wish
//#################################################################
var bcol = "white";
var bcolerr = "#FEE2DA";
//#################################################################
//Text colors
//tcol = should be the set the same as the bcol (makes the text invisible)
//tcolerr = change the error text color (makes it visible)
//#################################################################
var tcol= "white";
var tcolerr = "red";
//#################################################################
//Settings for NS4x
//#################################################################
var nserrwidth=140;
var nserrorpos ="center";//left right center
//#################################################################
//End of user settings do not edit below this line
//#################################################################
//################# DO NOT REMOVE THESE COMMENTS #################
// as_validform.js
// V 1.3
// 19 Aug 2003
// (c) Andrew Holt
// http://www.webdevtips.com
// http://www.dropmenu.co.uk
// http://www.webdesignhelp.co.uk
// http://www.andysonestop.co.uk
//You are free to use this script providing you leave all the comments intact
//Scripts can end up all over the net and by removing comments you are stopping people from getting proper updates from the author.
//End of preaching :)
/*
Tested in the following browsers
Mozilla 1.0
Netscape 6
IE 6
Opera 6
//16/Jul/2002 major update for NS4 - no more alert box - yippee! a customisable layer will appear instead
//19/Aug/2004 parseint bug fixed on date
Netscape 4.5
**I have developed this script to cater for NS4x users. By using this script on netscape 4x browsers you only lose some of the eye candy features. All the validation funtionality is identical to that of non ns4x browsers. NS4x users will get an informative customisable alert type box with all the required entries info.
**please note that I will no longer be developing or upgrading this code for Netscape 4x
**Netscape 4x is now a well out of date browser that doesn't support current standards
**if you are a Netscape 4x user and disagree with me then feel free to let me know
I haven't been able to test it out on a MAC yet but if there are any issues with mac browsers then I will certainly update the script once I can get access to one.
Please feel free to send me one as a gift in return for this script :)
Enjoy
Andy
*/
//################# END OF DO NOT REMOVE COMMENTS #################
//#################################################################
//What can this do for me then?
//take a look at the demo :)
//Not only can you validate all of the common form elements such as
//radio buttons - checkboxes - select boxes etc
//you can also validate the data that is entered into the form
//check for valid email syntax
//have text boxes that can only have numbers and spaces
//or just just alpha-numeric
//validate that dates are entered in the format UK (dd/mm/yyyy) US (mm/dd/yyyy)
//It's dead easy to set up
//you must have errX style for each error message
//#err0{color:white;font-weight:bold;}
//#err1{color:white;font-weight:bold;}
//#err2{color:white;font-weight:bold;}
//#err3{color:white;font-weight:bold;}
//the error text can be enclosed in a div (opera didn't seem to like span)
//or you can give the ID to a table cell as most of the demo is.
//set up the few variables below and thats about all there is to it
//to do
//optimise the code (highest priority)
//You'll find updates @ http://www.andysstuff.co.uk
// Andy.
//#################################################################
//#################################################################
//browser detect
//#################################################################
var Mac = (navigator.userAgent.indexOf("mac")!=-1) || (navigator.userAgent.indexOf("Mac")!=-1);
var opera = (navigator.userAgent.indexOf('Opera')!=-1);
var msie = (navigator.userAgent.indexOf('MSIE')!=-1);
var moz = (navigator.userAgent.indexOf('Gecko')!=-1);
var Nav4 = (document.layers);
if (opera && msie || opera){var opera=1; msie=0;}
if (msie && !opera){msie=1;}
if(msie || moz){var dom =1;}
//#################################################################
//End browser detect
//#################################################################
function validform(){
var err=1;
var etext="";
//#################################################################
//Internet Explorer
//Mozilla
//Netscape 6
//Opera
//#################################################################
if (dom || opera){
var i=0;
//reset the styles to white
while (i != validfields.length ){
eval("document.getElementById('err"+i+"').style.backgroundColor='"+bcol+"';");
eval("document.getElementById('err"+i+"').style.color='"+tcol+"';");
i++;
}
//check the required fields from array
var i=0;
while (i != validfields.length ){
whatfield = "";
//#################################################################
//text - textarea
if(fieldtype[i] == "txt"){
whatfield = eval("document."+formname+"."+validfields[i]+".value");
}
//#################################################################
//radio
if(fieldtype[i] == "radio"){
radcount = eval("document."+formname+"."+validfields[i]+".length");
for (var a = 0; a < radcount; a++){
if (eval("document."+formname+"."+validfields[i]+"["+a+"].checked")){
whatfield = "OK";
}
}
}
//#################################################################
//checkbox
if(fieldtype[i] == "chkbx"){
if (eval("document."+formname+"."+validfields[i]+".checked")){
whatfield = "OK";
}
}
//#################################################################
//Select
if(fieldtype[i] == "dropbox"){
radstr = "document."+formname+"."+validfields[i];
rs2 = eval(radstr+".options["+radstr+".selectedIndex].value");
whatfield = rs2;
}
//#################################################################
//
// Check Data
//
//#################################################################
//#################################################################
//email address
if (fieldallow[i] == "email" && whatfield != ""){
var re=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i;
if (!re.test(whatfield)) {
whatfield="";
}
}
//END email address
//#################################################################
//#################################################################
//a-z A-Z _ and space
if (fieldallow[i] == "asc" && whatfield != ""){
var re = /^[\w ]+$/;
if (!re.test(whatfield)) {
whatfield="";
}
}
//END -z A-Z _ and space
//#################################################################
//#################################################################
//a-z A-Z ONLY
if (fieldallow[i] == "textonly" && whatfield != ""){
var re = /^[a-zA-Z]+$/;
if (!re.test(whatfield)) {
whatfield="";
}
}
//END a-z A-Z ONLY
//#################################################################
//#################################################################
//0-9 and space
if (fieldallow[i] == "num" && whatfield != ""){
var re = /^[0-9 ]+$/;
if (!re.test(whatfield)) {;
whatfield="";
}
}
//END 0-9 and space
//#################################################################
//#################################################################
//0-9
if (fieldallow[i] == "numonly" && whatfield != ""){
var re = /^[0-9]+$/;
if (!re.test(whatfield)) {;
whatfield="";
}
}
//END 0-9
//#################################################################
//#################################################################
//Date UK and US date formats
if (fieldallow[i] == "dateUK" && whatfield != "" || fieldallow[i] == "dateUS" && whatfield != ""){
var re = /^\d{2}\/\d{2}\/\d{4}$/;
var isitok=0;
if (re.test(whatfield)) {
var bits = whatfield.split("/");
isitok = (bits.length == 3); // should be three components
if (isitok)
{
if(fieldallow[i] == "dateUK"){
day = parseInt(bits[0],10);
month = parseInt(bits[1],10);
}
if(fieldallow[i] == "dateUS"){
day = parseInt(bits[1],10);
month = parseInt(bits[0],10);
}
var year = parseInt(bits[2]);
isitok = !isNaN(month) && (month > 0) && (month < 13) && !isNaN(day) && (day > 0) && (day < 32) && !isNaN(year) && (bits[2].length == 4);
}
}
if(!isitok || !re.test(whatfield)){
whatfield="";
}
//EndDate UK and US date formats
//#################################################################
}
//#################################################################
//
// End Check Data
//
//#################################################################
//#################################################################
//if the required fields are empty reveal the warning message
if(whatfield == "" ){
eval("document.getElementById('err"+i+"').style.backgroundColor='"+bcolerr+"';");
eval("document.getElementById('err"+i+"').style.color='"+tcolerr+"';");
err=0;
}
//#################################################################
//continue count
i++;
}
}
//#################################################################
//END
//Internet Explorer
//Mozilla
//Netscape 6
//Opera
//#################################################################
//#################################################################
//do netscape4x
//Lucky old netscape users get a nice customisable alert type box
//not as nice as the other browsers get
//but as NS4x is dead - think yourself lucky :)
//I hope NS4x users still like the functionality of this script
//#################################################################
if(Nav4){
err=1;
var i=0;
var dateformat="";
var ErrString ="";
var whatfield="";
//check the required fields from array
while (i != validfields.length ){
whatfield="";
//#################################################################
//text - textarea
if(fieldtype[i] == "txt"){
whatfield = eval("document."+formname+"."+validfields[i]+".value");
}
//#################################################################
//radio
if(fieldtype[i] == "radio"){
radcount = eval("document."+formname+"."+validfields[i]+".length");
for (var a = 0; a < radcount; a++){
if (eval("document."+formname+"."+validfields[i]+"["+a+"].checked")){
whatfield = "ok";
}
}
}
//#################################################################
//END Radio
//#################################################################
//checkbox
if(fieldtype[i] == "chkbx"){
if (eval("document."+formname+"."+validfields[i]+".checked")){
whatfield = "ok";
}
}
//#################################################################
//Select
if(fieldtype[i] == "dropbox"){
radstr = "document."+formname+"."+validfields[i];
rs2 = eval(radstr+".options["+radstr+".selectedIndex].value");
whatfield = rs2;
}
//#################################################################
//
//Check Data
//
//#################################################################
//#################################################################
//email address
if (fieldallow[i] == "email" && whatfield != ""){
var re=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i;
if (!re.test(whatfield)) {
ErrString += ""+validfields[i]+" = Valid Email address only<br><br>";
whatfield="ok";
}
}
//END email address
//#################################################################
//#################################################################
//a-z A-Z _ numbers and space
if (fieldallow[i] == "asc" && whatfield != ""){
var re = /^[\w ]+$/;
if (!re.test(whatfield)) {
ErrString += ""+validfields[i]+" = letters _ Nos and spaces only<br><br>";
whatfield="ok";
}
}
//a-z A-Z _ numbers and space
//#################################################################
//#################################################################
//a-z A-Z _ numbers and space
if (fieldallow[i] == "textonly" && whatfield != ""){
var re = /^[a-zA-Z]+$/;
if (!re.test(whatfield)) {
ErrString += ""+validfields[i]+" = a-z A-Z only - No spaces allowed<br><br>";
whatfield="ok";
}
}
//END a-z A-Z ONLY
//#################################################################
//#################################################################
//0-9 and space
if (fieldallow[i] == "num" && whatfield != ""){
var re = /^[0-9 ]+$/;
if (!re.test(whatfield)) {;
whatfield="ok";
ErrString += ""+validfields[i]+" = numbers and spaces only<br><br>";
}
}
//END 0-9 and space
//#################################################################
//#################################################################
//0-9 and space
if (fieldallow[i] == "numonly" && whatfield != ""){
var re = /^[0-9]+$/;
if (!re.test(whatfield)) {;
whatfield="ok";
ErrString += ""+validfields[i]+" = numbers only - NO spaces<br><br>";
}
}
//END 0-9 and space
//#################################################################
//#################################################################
//date UK and US
if (fieldallow[i] == "dateUK" && whatfield != "" || fieldallow[i] == "dateUS" && whatfield != ""){
var re = /^\d{2}\/\d{2}\/\d{4}$/;
var isitok=0;
if (fieldallow[i] == "dateUK"){dateformat="(dd/mm/yyyy)";}
if (fieldallow[i] == "dateUS"){dateformat="(mm/dd/yyyy)";}
if (re.test(whatfield)) {
var bits = whatfield.split("/");
isitok = (bits.length == 3); // should be three components
if (isitok)
{
if(fieldallow[i] == "dateUK"){
day = parseInt(bits[0],10);
month = parseInt(bits[1],10);
}
if(fieldallow[i] == "dateUS"){
day = parseInt(bits[1],10);
month = parseInt(bits[0],10);
}
var year = parseInt(bits[2]);
isitok = !isNaN(month) && (month > 0) && (month < 13) && !isNaN(day) && (day > 0) && (day < 32) && !isNaN(year) && (bits[2].length == 4);
}
}
if(!isitok || !re.test(whatfield)){
whatfield="ok";
ErrString += ""+validfields[i]+" = "+dateformat+"<br><br>";
}
//END date
//#################################################################
}
//#################################################################
//
// End Check Data
//
//#################################################################
//#################################################################
//if the required fields are empty reveal the warning message
if(whatfield == ""){
ErrString += validfields[i]+" required<br><br>";
err=0;
}
i++;
}
//#################################################################
//#################################################################
//if the required fields are empty show the warning alert message
if (err==0){
etext="<table border=0 width="+nserrwidth+" cellpadding=3> <tr><td bgcolor=red><b class=nserrorhead>ERROR</b></td></tr> <tr><td class=nserrorcontent>";
etext+=ErrString;
etext+="</td></tr><tr><td align=right><a href=\"#\" onclick=\"close_ns_errs();return false\" class=nscloseit>close</a></td></tr></table>";
eval("shownserrs('"+etext+"')");
}
}
//#################################################################
//
//END NS4
//
//#################################################################
//#################################################################
//do not submit the form if there are errors
//REQUIRED
if (err==0){ return false;}
//#################################################################
//#################################################################
//remove this line on a real form or if you want an alert change
//return false to return true
//OPTIONAL
if (err==1){alert('If this was real your form would be sent :)\nbut it isn\'t so it wasn\'t');return false;}
//#################################################################
}
//ns4x only calls this so no need to browser sniff
function shownserrs(etext){
winwidth = window.innerWidth;
if(nserrorpos=="left"){lpos=0;}
if(nserrorpos=="center"){
winwidth-=nserrwidth;
lpos=winwidth/2;}
if(nserrorpos=="right"){
lpos=winwidth-nserrwidth;}
document.nserror.top=window.pageYOffset+10;
document.nserror.left=lpos;
document.layers['nserror'].visibility='visible';
document.layers['nserror'].document.layers["nserrortext"].document.open();
document.layers['nserror'].document.layers["nserrortext"].document.write(etext);
document.layers['nserror'].document.layers["nserrortext"].document.close();
}
//ns4x only call this so no need to browser sniff
function close_ns_errs(){
etext="";
document.layers['nserror'].visibility='hidden';
}
//#################################################################
//END OF SCRIPT
//#################################################################
// -->
</script>
</head>
<body>
<h3>as_validform.js (v1.3) Demo</h3>
<!-- your form must have a name and the onSubmit function call -->
<!--
make sure that your form fields have appropriate names
No spaces in field names (use underscore)
-->
<form name=hello onSubmit="return validform();" action="#" method="get">
<table border="0" class="tblborder" align="center" cellspacing="0" cellpadding="5" id="ft">
<tr>
<td valign="top" class="lcell">Name
</td>
<td id="err0" valign="top" class="rcell"><input type="text" name="Your_Name" size="15">
<br> Please enter your Name (a-z A-Z _ and space)</td>
<td valign="top" class="lcell">Email</td>
<td id="err1" valign="top" class="rcell"><input type="text" name="email" size="15">
<br>Please enter a valid Email address</td>
</tr>
<tr>
<td valign="top" class="lcell">Comments</td>
<td id="err2" valign="top" class="rcell"><textarea cols="10" rows="3" name="comments"></textarea>
<br>Please enter some Comments (a-z A-Z _ and space)</td>
<td valign="top" class="lcell">Sex</td>
<td valign="top" class="rcell"><input type="radio" name="sex" value="Male">Male<br>
<input type="radio" name="sex" value="Female">Female
<div id="err3">Are you Male or Female?</div></td>
</tr>
<tr>
<td valign="top" class="lcell">You must tick this box</td>
<td id="err4" valign="top" class="rcell"><input type="checkbox" name="agree" value="" >
<br>You must tick this box
</td>
<td valign="top" class="lcell">You don't need to tick this box</td>
<td valign="top" class="rcell"><input type="checkbox" name="agree2" value="" >
</td>
</tr>
<tr>
<td valign="top" class="lcell">What would you call your cat?</td>
<td id="err5" valign="top" class="rcell">
<select name="catname" size="1">
<option value="" SELECTED>--</option>
<option value="Alfie">Alfie</option>
<option value="Felix">Felix</option>
<option value="Molly">Molly</option>
<option value="George">George</option>
</select>
<br>Please tell us your preferred cats name from the list</td>
<td valign="top" class="lcell">What would you call your dog?</td>
<td id="err6" class="rcell">
<select name="dogname" size="3" multiple>
<option value="" selected></option>
<option value="Bruno">Bruno</option>
<option value="Rambo">Rambo</option>
<option value="Henry">Henry</option>
<option value="Tiddles">Tiddles</option>
</select>
<br>Select dog name(s) from the list</td>
</tr>
<tr>
<td valign="top" class="lcell">Phone</td>
<td id="err7" valign="top" class="rcell"><input type="text" name="phone" size="15">
<br> Phone No. - numbers and spaces only</td>
<td valign="top" class="lcell">Date<br>(dd/mm/yyyy)</td>
<td id="err8" valign="top" class="rcell"><input type="text" name="date" size="15">
<br>enter date(dd/mm/yyyy)</td>
</tr>
<tr>
<td valign="top" align="center" colspan="4">
<input type="submit" name="submit" value="Send">
<input type=button value="reset" onclick="history.go(0);reset();"></td>
</tr>
</table>
</form>
<div align="center"><a href="http://www.webdevtips.co.uk">Visit http://www.webdevtips.co.uk for more scripts, tips and updates to as_validform.js</a></div>
<!-- REQUIRED FOR NS4x ERROR BOX NO NEED TO EDIT -->
<div id="nserror">
<div id="nserrortext"></div>
</div>
<!-- END NS4x REQUIRED ERROR BOX -->
</body>
</html>