JavaScript Validation Form - JavaScript Made Easy

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Validation Form		[View Sample]

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 email address it looks for the @ symbol.


Insert into <HEAD>


Insert into <BODY>
<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="" 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>

Other Options