Okay,
So basically, in this tutorial I'm assuming you have a plain form, that does something. Whether it signs someone up, sends an email, whatever. I'm also assuming it has no protection, so that someone may be able to send a blank form, or a form with an invalid email address, etc.
If this is so, check this out:
The Script Is:
Let's break it down.
The first element:
This tells javascript we are creating a new function. You put your code in side of this. We will use the function name later.
The second element:
The first part of this chunk of code tells javascript that variable 'a' holds the value of 'fname', for the form 'formname'. It then tells javascript that if a is equal to null, or is left blank to send an alert to the user to fill in the form. Then it performs a command called 'return false;'. Basically, this tells javascript to stop running the code. Return false; stops the rest of the code from running when the user clicks 'OK' in the dialogue box so that the form doesn't submit.
The third element:
You can guess what this chunk of code does, as it basically does the exact same stuff as in the second element. It tells javascript that variable b contains 'lname' for the form 'formname' and if variable b (lname) is equal to null or is left blank, to show an alert box and stop the form from running.
The fourth element:
This part is a teensy bit more complicated, but I will walk you through it nevertheless. The first part of the code tells javascript that variable c contains 'email' for the form 'formname'. It then checks to see if the field was filled out, as you've seen in the previous examples. BUT, what is this next part you see?
This part of the code tells javascript that variable 'd' contains 'email' for the form 'formname'. Then, it checks the position of at (@) and the position of the dot (.). It then verifies that the @ sign appears only once, and it verifies that there is a .domain at the end. This makes sure that users can't say something like: @deleted.net, or something like 348082894.
The fifth element:
This chunk of code first tells javascript that variable 'e' contains 'age' for the form 'formname'. It tells javascript to check if 'e' is null, or was left blank, and if that is true it sends an alert to the user and returns the form to false, stopping it from running so that the form cannot submit.
The sixth element:
This part of the code first tells javascript that variable 'f' contains 'message' for the form 'formname'. It then checks if variable 'f' is nulled or was left blank. If that returns true then it sends the user an alert box, and returns the rest of the code false so that the form doesn't submit, sending you a spammy email.
Alright, now you know how it works...how do you use it?
The thing you're going to need to do is include it in your website file's <head> tags. Like so:
Inline Script Technique
External File Technique
Firstly, you're going to want to place the contents of the script in a file such as script.js.
Then, you'll need to perform the following code:
Now that the javascript file is included in your file, you need to tell the form to use it, or all is lost!
To do that, insert the "onsubmit" part of the following code into your form's code.
Basically what you want to do is add on: return validateForm(); onto you're form's code. Does that look familiar? That's right, that's the function name we used in the very start of this tutorial.
Anyway, that's all you need to do! Really, it was that easy.
I hope you enjoyed this tutorial, and if it helped you send some FP cash my way! (Mostly jokes, it's a free tutorial, but if you're feeling extremely grateful, go for it 🙂)
-Jake
Alternative Downloads:
depositfiles.com: http://multiupload.biz/df_5f7gwj8ofzgi
hotfile.com: http://multiupload.biz/hf_5f7gwj8ofzgi
rapidshare.com: http://multiupload.biz/rs_5f7gwj8ofzgi
uploading.com: http://multiupload.biz/up_5f7gwj8ofzgi
zshare.net: http://multiupload.biz/zs_5f7gwj8ofzgi
wupload.com: http://multiupload.biz/wu_5f7gwj8ofzgi
uploaded.to: http://multiupload.biz/ul_5f7gwj8ofzgi
fileserve.com: http://multiupload.biz/fv_5f7gwj8ofzgi
bitshare.com: http://multiupload.biz/bs_5f7gwj8ofzgi
So basically, in this tutorial I'm assuming you have a plain form, that does something. Whether it signs someone up, sends an email, whatever. I'm also assuming it has no protection, so that someone may be able to send a blank form, or a form with an invalid email address, etc.
If this is so, check this out:
The Script Is:
Code:
function validateForm(){
//Checking to see if "fname (first name)" is filled
var a=document.forms["formname"]["fname"].value;
if (a=null || a=="")
{
alert("You didn't enter your first name\nHow do you expect us to address you?");
return false;
}
//Checking to see if "lname (last name)" is filled
var b=document.forms["formname"]["lname"].value;
if (b=null || b=="")
{
alert("You didn't enter a last name!\nHow will we ever identify you?");
return false;
}
//Checking to see if "email" is filled
var c=document.forms["formname"]["email"].value;
if (c=null || c=="")
{
alert("You didn't even enter an email address!");
return false;
}
//Now that we've checked that the field is not blank....is the email valid?
//Checking:
var d=document.forms["formname"]["email"].value;
var atpos=d.indexOf("@");
var dotpos=d.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>d.length)
{
alert("The email address you entered is invalid.\nFormat like this: [email protected]");
return false;
}
//Checking to see if "age" is filled
var e=document.forms["formname"]["age"].value;
if (e=null || e=="")
{
alert("You didn't fill in you're age!");
return false;
}
//Checking to see if the message is filled out
var f=document.forms["form"]["message"].value;
if (f=null || f=="")
{
alert("You left the most important part out!\nYou need to fill in a message!");
return false;
}
}Let's break it down.
The first element:
Code:
function validateForm() {This tells javascript we are creating a new function. You put your code in side of this. We will use the function name later.
The second element:
Code:
var a=document.forms["formname"]["fname"].value;
if (a=null || a=="")
{
alert("You didn't enter your first name\nHow do you expect us to address you?");
return false;
}The first part of this chunk of code tells javascript that variable 'a' holds the value of 'fname', for the form 'formname'. It then tells javascript that if a is equal to null, or is left blank to send an alert to the user to fill in the form. Then it performs a command called 'return false;'. Basically, this tells javascript to stop running the code. Return false; stops the rest of the code from running when the user clicks 'OK' in the dialogue box so that the form doesn't submit.
The third element:
Code:
//Checking to see if "lname (last name)" is filled
var b=document.forms["formname"]["lname"].value;
if (b=null || b=="")
{
alert("You didn't enter a last name!\nHow will we ever identify you?");
return false;
}You can guess what this chunk of code does, as it basically does the exact same stuff as in the second element. It tells javascript that variable b contains 'lname' for the form 'formname' and if variable b (lname) is equal to null or is left blank, to show an alert box and stop the form from running.
The fourth element:
Code:
//Checking to see if "email" is filled
var c=document.forms["formname"]["email"].value;
if (c=null || c=="")
{
alert("You didn't even enter an email address!");
return false;
}
//Now that we've checked that the field is not blank....is the email valid?
//Checking:
var d=document.forms["formname"]["email"].value;
var atpos=d.indexOf("@");
var dotpos=d.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>d.length)
{
alert("The email address you entered is invalid.\nFormat like this: [email protected]");
return false;
}This part is a teensy bit more complicated, but I will walk you through it nevertheless. The first part of the code tells javascript that variable c contains 'email' for the form 'formname'. It then checks to see if the field was filled out, as you've seen in the previous examples. BUT, what is this next part you see?
This part of the code tells javascript that variable 'd' contains 'email' for the form 'formname'. Then, it checks the position of at (@) and the position of the dot (.). It then verifies that the @ sign appears only once, and it verifies that there is a .domain at the end. This makes sure that users can't say something like: @deleted.net, or something like 348082894.
The fifth element:
Code:
//Checking to see if "age" is filled
var e=document.forms["formname"]["age"].value;
if (e=null || e=="")
{
alert("You didn't fill in you're age!");
return false;
}This chunk of code first tells javascript that variable 'e' contains 'age' for the form 'formname'. It tells javascript to check if 'e' is null, or was left blank, and if that is true it sends an alert to the user and returns the form to false, stopping it from running so that the form cannot submit.
The sixth element:
Code:
//Checking to see if the message is filled out
var f=document.forms["form"]["message"].value;
if (f=null || f=="")
{
alert("You left the most important part out!\nYou need to fill in a message!");
return false;
}
}This part of the code first tells javascript that variable 'f' contains 'message' for the form 'formname'. It then checks if variable 'f' is nulled or was left blank. If that returns true then it sends the user an alert box, and returns the rest of the code false so that the form doesn't submit, sending you a spammy email.
Alright, now you know how it works...how do you use it?
The thing you're going to need to do is include it in your website file's <head> tags. Like so:
Inline Script Technique
Code:
<head>
<script type="text/javascript">
function validateForm(){
//Checking to see if "fname (first name)" is filled
var a=document.forms["formname"]["fname"].value;
if (a=null || a=="")
{
alert("You didn't enter your first name\nHow do you expect us to address you?");
return false;
}
//Checking to see if "lname (last name)" is filled
var b=document.forms["formname"]["lname"].value;
if (b=null || b=="")
{
alert("You didn't enter a last name!\nHow will we ever identify you?");
return false;
}
//Checking to see if "email" is filled
var c=document.forms["formname"]["email"].value;
if (c=null || c=="")
{
alert("You didn't even enter an email address!");
return false;
}
//Now that we've checked that the field is not blank....is the email valid?
//Checking:
var d=document.forms["formname"]["email"].value;
var atpos=d.indexOf("@");
var dotpos=d.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>d.length)
{
alert("The email address you entered is invalid.\nFormat like this: [email protected]");
return false;
}
//Checking to see if "age" is filled
var e=document.forms["formname"]["age"].value;
if (e=null || e=="")
{
alert("You didn't fill in you're age!");
return false;
}
if e.field.value.length >= 3
{
alert("To many numbers!");
return false;
}
//Checking to see if the message is filled out
var f=document.forms["form"]["message"].value;
if (f=null || f=="")
{
alert("You left the most important part out!\nYou need to fill in a message!");
return false;
}
}
</script>
</head>External File Technique
Firstly, you're going to want to place the contents of the script in a file such as script.js.
Then, you'll need to perform the following code:
Code:
<head>
<script type="text/javascript" src="script.js">
</head>Now that the javascript file is included in your file, you need to tell the form to use it, or all is lost!
To do that, insert the "onsubmit" part of the following code into your form's code.
Code:
<form name="formname" id="formname" action="actionfile.php" onsubmit="return validateForm();">
form stuff
</form>Basically what you want to do is add on: return validateForm(); onto you're form's code. Does that look familiar? That's right, that's the function name we used in the very start of this tutorial.
Anyway, that's all you need to do! Really, it was that easy.
I hope you enjoyed this tutorial, and if it helped you send some FP cash my way! (Mostly jokes, it's a free tutorial, but if you're feeling extremely grateful, go for it 🙂)
-Jake
Alternative Downloads:
depositfiles.com: http://multiupload.biz/df_5f7gwj8ofzgi
hotfile.com: http://multiupload.biz/hf_5f7gwj8ofzgi
rapidshare.com: http://multiupload.biz/rs_5f7gwj8ofzgi
uploading.com: http://multiupload.biz/up_5f7gwj8ofzgi
zshare.net: http://multiupload.biz/zs_5f7gwj8ofzgi
wupload.com: http://multiupload.biz/wu_5f7gwj8ofzgi
uploaded.to: http://multiupload.biz/ul_5f7gwj8ofzgi
fileserve.com: http://multiupload.biz/fv_5f7gwj8ofzgi
bitshare.com: http://multiupload.biz/bs_5f7gwj8ofzgi
