Javascript Check Form Script
Javascript is useful for validating the details entered into a form before the submit button is clicked. The script runs client-side so runs on the users browser rather than the web server. This speeds up the form check process since the data does not need to be sent, checked on the web server and sent back again.
In this example, we present a user registration form and have pop-up alert boxes where the required details are entered incorrectly. You can enter values in the boxes and click submit to see the effects of entering invalid data.
User Registration Form Example
Javascript Code for Form Checking
<script language="Javascript">
<!--
function checkform(){
if (document.signup.username.value.length < 4){
alert("Please enter a name with at least 4 characters."
return false}
if (document.signup.password.value.length < 5){
alert("Please enter at least 5 characters for your password.")
return false}
if ((document.signup.email.value.length < 9) || (document.signup.email.value.indexOf('@') == -1) || (document.signup.email.value.indexOf('.') == -1)){
alert("Please enter a valid email address like you@domain.com")
return false}
if (document.signup.confirm.checked == false){
alert("You need to read and agree to the terms of service.")
return false}
}
// -->
</script>
User Registration Form HTML
This is the same HTML code used in the User Registration Form example above. Notice the use of maxsize in the form fields, this prevents large amounts of data from being pasted into the form.
When the submit button is clicked, the checkform script is run and the data is sent by the POST method which keeps it hidden. The name of each data field in the form results in a corresponding environment variable of the same name which stores the corresponding data.
The destination URL should be placed in action="http://myurl.php".
Using php you can access the data with $_POST['variable'] where variable is the name of the data item you want. If your php setup has register_globals set to "on", you can access the data directly with $variable, but this method is less secure since it can be provided by a remote link with ?variable=data appended to the url.
User Registration Form HTML Code
<form name="signup" action="" method="POST" onSubmit="return checkform(this.form)"><table>
<tr><td>Enter your name or handle:</td><td><input name="username" type="text" value="" maxlength="15"> - this will appear in your postings.</td></tr>
<tr><td>Your chosen password:</td><td><input name="password" type="text" value="" maxlength="15"> - write this down in a safe place.</td></tr>
<tr><td>Your email address:</td><td><input name="email" type="text" value="" maxlength="30"> - will be kept hidden.</td></tr>
<tr><td colspan=2><p class="red">We will email you your user ID so please make sure your email address is correct!</p></td></tr>
<tr><td>Location:</td><td><br>
<select name="location" size=3>
<OPTION value="1" SELECTED>United States
<OPTION value="2">Canada
<OPTION value="3">United Kingdom
<OPTION value="4">Australia
<OPTION value="5">Japan
<OPTION value="6">Germany
<OPTION value="7">Austria
<OPTION value="8">Argentina
<OPTION value="9">Belgium
<OPTION value="10">Brazil
<OPTION value="2">Canada
<OPTION value="11">Denmark
<OPTION value="12">Finland
<OPTION value="13">France
<OPTION value="6">Germany
<OPTION value="14">Hong Kong
<OPTION value="15">India
<OPTION value="16">Ireland
<OPTION value="17">Israel
<OPTION value="18">Italy
<OPTION value="19">Japan
<OPTION value="20">Mexico
<OPTION value="21">New Zealand
<OPTION value="22">Norway
<OPTION value="23">Singapore
<OPTION value="24">Spain
<OPTION value="25">South Africa
<OPTION value="26">South Korea
<OPTION value="27">Sweden
<OPTION value="28">Switzerland
<OPTION value="29">Taiwan
<OPTION value="30">The Netherlands
<OPTION value="3">United Kingdom
<OPTION value="1">United States
<OPTION value="0">Other country
</select>
</td></tr>
</table>
<p>I confirm that I have read and agree to the <b>terms of service</b>: <input type="checkbox" name="confirm" value="check me">
<p class="red">All the above are required fields.</p>
<p><input type="submit" value="Click to Validate"> - your login details will be sent by email</p>
</form>
