This is an old revision of the document!
PlayGround
<div align=“center”><h1>More Validation of Forms</h1></div> <p>This script carries out various simple checks to try to ensure the fields are filled out correctly. For example, for the URL field, it checks to see if 'http:' is present, and for the e-mail address it looks for the @ symbol. See the comments for how to vary the validation requirements, and how to make the script 'live'; as it is set up at present it just returns a message that all entries are verified OK.</p> <script language=“JavaScript” type=“text/javascript”> <!– hide script from old browsers
simple test for address format function testMAIL(form, Ctrl) { if (Ctrl.value == “” || Ctrl.value.indexOf ('@', 0) == -1) { validatePrompt (Ctrl, “Enter a valid email address”) return (false); } else return (true); } simple test for URL format function testURL(form, Ctrl) {
if (Ctrl.value == "" || Ctrl.value.indexOf("http://",0) == -1) {
validatePrompt (Ctrl, "Please provide a valid URL")
return (false);
} else
return (true);
}
simple test for title existance function testTITLE(form, Ctrl) { if (Ctrl.value == “”) { validatePrompt (Ctrl, “Please provide your page's title”) return (false); } else return (true); } simple test for password existance function testPASSWD(form, Ctrl) {
if (Ctrl.value.length < 4 || Ctrl.value.indexOf(' ',0) != -1) {
validatePrompt (Ctrl, "Your password must be at least 4 characters long and contain no whitespace.")
return (false);
} else
return (true);
}
simple test for keywords existance function testKEYS(form, Ctrl) { if (Ctrl.value == “”) { validatePrompt (Ctrl, “You may enter up to 20 keywords.”) return (true); was: false, now field optional
} else return (true);
}
simple test for description existance function testDESC(form, Ctrl) { if (Ctrl.value == “”) { validatePrompt (Ctrl, “You may enter a description of your site.”) return (true); was: false, now field optional
} else return (true);
}
test all fields abort submit on error submit only if all fields pass tests function runSubmit (form) { if (!testURL(form, form.url)) return; if (!testTITLE(form, form.title)) return; if (!testMAIL(form, form.mail)) return; if (!testPASSWD(form, form.pw)) return; if (!testKEYS(form, form.keywords)) return; if (!testDESC(form, form.desc)) return; alert (“All entries verified OK!”);
form.submit(); // un-comment to submit form return;
}
support routine used during tests function validatePrompt (Ctrl, PromptStr) { alert (PromptStr) Ctrl.focus(); return; } called on document load function loadDoc() {
// initial focus; use if needed //document.join.url.focus (); return;
}
end hiding from old browsers –> </script> <form action=“http://pacs.ece.utk.edu/doku.php?id=playground:playground:done” method=“POST” name=“join”> <!– Fill in actual HREF for post –> <table border=“1”> <tr> <th colspan=“2” colstart=“1”>These fields are required:</th> </tr> <tr> <td align=“center” colstart=“1”>Your page's URL:</td> <td align=“center” colstart=“2”><input type=“text” size=“50” name=“url”></td> </tr> <tr> <td align=“center” colstart=“1”>Your page's title:</td> <td align=“center” colstart=“2”><input type=“text” size=“50” name=“title”></td> </tr> <tr> <td align=“center” colstart=“1”>Your e-mail address:</td> <td align=“center” colstart=“2”><input type=“text” size=“30” name=“mail”></td> </tr> <tr> <td align=“center” colstart=“1”>Password:</td> <td align=“center” colstart=“2”><input type=“text” size=“10” name=“pw”></td> </tr> <tr> <td align=“center” colspan=“2” colstart=“1”>(The password allows you to change info about your site later). <b>Please do not forget it!</b></td> </tr> <tr> <th colspan=“2” colstart=“1”>These fields are optional:</th> </tr> <tr> <td align=“center” colstart=“1”>Enter up to 20 keywords about your site:</td> <td align=“center” colstart=“2”><input type=“text” size=“50” name=“keywords”></td> </tr> <tr> <td align=“center” colstart=“1”>Enter a short description of your site.</td> <td align=“center” colstart=“2”><textarea name=“desc” rows=“5” cols=“42” wrap=“soft”></textarea></td> </tr> <tr> <td align=“center” colspan=“2” colstart=“1”><input type=“button” name=“Submit” value=“Submit this information” onclick=“runSubmit(this.form)”> </td> </tr> </table> </form> </html> <php> $rows=5; $columns=2; echo “\n<table class=\”inline\“>\n”; for($i = 0; $i < $rows; $i++){ echo (“<tr class=\”row“.$i.$j.”\“>\n”); if($i == 0){ for($j = 0; $j < $columns; $j++){ echo (“<th class=\”col“.$j.” leftalign\“>Item ”.$i.$j.“</th>\n”); } }else{ for($j = 0; $j < $columns; $j++){ echo (“<td class=\”col“.$j.” leftalign\“>Item ”.$i.$j.“</td>\n”); } } echo (“</tr>\n”); } echo “</table>”; </php> ^ Heading 1 ^ Heading 2 ^ Heading 3 ^ | Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 | | Row 2 Col 1 | some colspan (note the double pipe) || | Row 3 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
