JAVASCRIPT INTRODUCTION
"JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications (or) Client side Webpage validation."
JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
Before you continue you should have a basic understanding of the following:
» HTML
If you want to study these subjects first learn HTML.
What is JavaScript?
» JavaScript was designed to add interactivity to HTML pages.
» JavaScript is a scripting language.
» A scripting language is a lightweight programming language.
» JavaScript is usually embedded directly into HTML pages.
» JavaScript is an interpreted language (means that scripts execute without preliminary compilation).
» Everyone can use JavaScript without purchasing a license.
The example below shows how to use JavaScript to write text on a web page:
Example
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script></body>
</html>
The example below shows how to use JavaScript to write text on a web page:
Example
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script></body>
</html>
Where to Put the JavaScript
JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, or at a later event, such as when a user clicks a button. When this is the case we put the script inside a function, you will learn about functions in a later chapter.
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, are placed in functions.
Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Scripts <body>
If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.
Example
<html>
<head>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
Scripts<head> and <body>
You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script></body>
</html>
The example below shows how to use JavaScript to write text on a web page:
Example
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script></body>
</html>
Where to Put the JavaScript
JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, or at a later event, such as when a user clicks a button. When this is the case we put the script inside a function, you will learn about functions in a later chapter.
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, are placed in functions.
Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Scripts <body>
If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.
Example
<html>
<head>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
Scripts<head> and <body>
You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
USERNAME VALIDATION USING JAVASCRIPT
Username validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.name.value;
if(a=="")
{
alert("Please Enter Your Name");
document.form.name.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Your Name:</td>
<td><input type="text" name="name""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Username Validation allows only Characters.
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.name.value;
if(a=="")
{
alert("Please Enter Your Name");
document.form.name.focus();
return false;
}
if(!isNaN(a))
{
alert("Please Enter Only Characters");
document.form.name.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Your Name:</td>
<td><input type="text" name="name""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Username Validation allows only Limited Characters.
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.name.value;
if(a=="")
{
alert("Please Enter Your Name");
document.form.name.focus();
return false;
}
if(!isNaN(a))
{
alert("Please Enter Only Characters");
document.form.name.select();
return false;
}
if ((a.length < 5) || (a.length > 15))
{
alert("Your Character must be 5 to 15 Character");
document.form.name.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Your Name:</td>
<td><input type="text" name="name""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
PASSWORD VALIDATION USING JAVASCRIPT
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> password:</td>
<td><input type="text" name="pass""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Password Validation (Hiding Your password)
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Password:</td>
<td><input type="password" name="pass""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Password Validation allows only Limited Characters or integers.
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
if ((a.length < 4) || (a.length > 8))
{
alert("Your Password must be 4 to 8 Character");
document.form.pass.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Passsword:</td>
<td><input type="password" name="pass""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
EMAIL VALIDATION USING JAVASCRIPT
Email validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.email.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.email.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Email:</td>
<td><input type="text" name="email""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Email Validation (Email filter /@\ and /.\)
Example
<html>
<head>
<script type="text/javascript">
function ValidateContactForm()
{
var email = document.ContactForm.Email;
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
}
</script></head>
<body>
<form name="ContactForm" method="post" onsubmit="return ValidateContactForm();">
<tr>
<td> Email:</td>
<td><input type="text" name="Email""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Email Validation (Email filter /@\ and /.\)
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
var b=emailfilter.test(document.form2.mailid.value);
if(b==false)
{
alert("Please Enter a valid Mail ID");
document.form2.mailid.focus();
return false;
}
}
</script></head>
<body>
<form name="form2" method="post" onsubmit="return validat()">
<tr>
<td> Email-ID:</td>
<td><input type="text" name="mailid"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
PHONE NUMBER VALIDATION USING JAVASCRIPT
Phone validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("Please Enter Your Phone Number");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Phone:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Phoneno Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Phone Number(Like : 044-42046569)");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Phone No:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
MOBILE NUMBER VALIDATION USING JAVASCRIPT
Mobile validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("Please Enter Your Mobile Number");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Mobile:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Mobile Number Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Mobile No:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Mobileno Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.form.phone.focus();
return false;
}
if((a.length < 1) || (a.length > 10))
{
alert(" Your Mobile Number must be 1 to 10 Integers");
document.form.phone.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Mobile No:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
ADDRESS AND TEXTAREA VALIDATION USING JAVASCRIPT
Textarea validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.address.value;
if(a=="")
{
alert("Please Enter Your Details Here");
document.form.address.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Address:</td>
<td><textarea name="address" cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Textarea Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.address.value;
if(a=="")
{
alert("please Enter the details");
document.form.address.focus();
return false;
}
if((a.length < 20) || (a.length > 100))
{
alert(" Your textarea must be 20 to 100 characters");
document.form.address.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Address:</td>
<td><textarea name="address" cols="60" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
RADIO BUTTON VALIDATION USING JAVASCRIPT
RadioButton validation:
Example
<html>
<head>
<script LANGUAGE="JavaScript">
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script></head>
<body>
<form name="feedback" action="#" method=post>
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form>
</body>
</html>
The Output is Shown Here:
Your Gender: Male Female
RadioButton Validation
Example
<html>
<head>
<script type="text/javascript">
function checkButton(){
if(document.form1.button1.checked == true){
alert("Box1 is checked");
} else if(document.form1.button2.checked == true){
alert("Box 2 is checked");
}
}
</script></head>
<body>
<form name="form1">
<input type="radio" name=button1>Box 1
<br> <input type="radio" name=button2 CHECKED>Box 2
<br> <INPUT type="button" value="Get Checked" onClick='checkButton()'>
</form>
</body>
</html>
The Output is Shown Here:
Box 1
Box 2
RadioButton Validation
Example
<html>
<head>
<script type="text/javascript">
function evalGroup()
{
var group = document.radioForm.myRadio;
for (var i=0; i<group.length; i++) {
if (group[i].checked)
break;
}
if (i==group.length)
return alert("No radio button is checked");
alert("Radio Button " + (i+1) + " is checked.");
}
</script></head>
<body>
<form name="radioForm">
Radio Button 1: <input type="radio" name="myRadio" /><br />
Radio Button 2: <input type="radio" name="myRadio" /><br />
Radio Button 3: <input type="radio" name="myRadio" /><br />
Radio Button 4: <input type="radio" name="myRadio" /><br /><br />
<input type="button" value="Eval Group" onclick="evalGroup()" />
</form>
</body>
</html>
The Output is Shown Here:
Radio Button 1:
Radio Button 2:
Radio Button 3:
Radio Button 4:
CHECKBOX VALIDATION USING JAVASCRIPT
Checkbox validation:
Example
<html>
<head>
<script LANGUAGE="JavaScript">
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script></head>
<body>
<form name="feedback" action="#" method=post>
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="checkbox" name="gender" value="Female"> Female
<input type="checkbox" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form>
</body>
</html>
The Output is Shown Here:
Your Gender: Male Female
Checkbox Validation
Example
<html>
<head>
<script type="text/javascript">
function checkButton(){
if(document.form1.button1.checked == true){
alert("Box1 is checked");
} else if(document.form1.button2.checked == true){
alert("Box 2 is checked");
}
}
</script></head>
<body>
<form name="form1">
<input type="chechbox" name=button1>Box 1
<br> <input type="chechbox" name=button2 CHECKED>Box 2
<br> <INPUT type="button" value="Get Checked" onClick='checkButton()'>
</form>
</body>
</html>
The Output is Shown Here:
Box 1
Box 2
Checkbox Validation
Example
<html>
<head>
<script type="text/javascript">
function evalGroup()
{
var group = document.radioForm.myRadio;
for (var i=0; i<group.length; i++) {
if (group[i].checked)
break;
}
if (i==group.length)
return alert("No Checkbox is checked");
alert("Radio Button " + (i+1) + " is checked.");
}
</script></head>
<body>
<form name="radioForm">
Checkbox 1: <input type="chechbox" name="myRadio" /><br />
Chechbox 2: <input type="chechbox" name="myRadio" /><br />
Chechbox 3: <input type="chechbox" name="myRadio" /><br />
Chechbox 4: <input type="chechbox" name="myRadio" /><br /><br />
<input type="button" value="Eval Group" onclick="evalGroup()" />
</form>
</body>
</html>
The Output is Shown Here:
chechbox 1:
chechbox 2:
chechbox 3:
chechbox 4:
Checkbox Validation
Example
<html>
<head>
<script type="text/javascript">
var myFlag = false
function initValue() {
myFlag = document.forms[0].sizes[0].checked;
}
function sh(form) {
for (var i = 0; i < form.sizes.length; i++) {
if (form.sizes[i].checked) {
break;
}
}
alert(form.sizes[i].value);
}
function setmyFlag(setting) {
myFlag = setting;
}
function exitMsg() {
if (myFlag) {
alert("exit message.");
}
}
</script> </head>
<body>
<form >
<input type="checkbox" name="sizes" value="1" checked="checked" onclick="setmyFlag(true)" />1
<input type="checkbox" name="sizes" value="2" onclick="setmyFlag(false)" />2
<input type="checkbox" name="sizes" value="7" onclick="setmyFlag(false)" /&g <input type="checkbox" name="sizes" value="5" onclick="setmyFlag(false)" />5
t;5
<input type="button" name="Viewer" value="View" onclick="sh(this.form)" />
</form>
</body>
</html>
The Output is Shown Here:
1 2 7 5
SELECT INDEX VALIDATION USING JAVASCRIPT
Select Index validation:
Example
<html>
<head>
<script LANGUAGE="JavaScript">
function validation()
{
if(document.login.type.selectedIndex==0)
{ alert("Please select your member type");
document.login.type.focus();
return false;
}
return true;
}
</script></head>
<body>
<form name="login" method="post" action="#" onsubmit="return validation();">
<select name="type" class="texta1">
<option name="sel" value="Selected">Select Type</option>
<option name="fr" value="Freshers">Freshers</option>
<option name="ex" value="Experienced">Experienced</option>
<option name="un" value="Under_Studying">Under_Studying</option>
</select>
</form>
</body>
</html>
The Output is Shown Here:
Drog and Drop Validation
Example
<html>
<head>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += oEvent.type + "\n";
</script></head>
<body>
<P>Try dragging the text from the left textbox to the right one.</p>
<P>
<input type="text" value="drag this text"
ondragstart="handleDragDropEvent(event)"
ondrag="handleDragDropEvent(event)"
ondragend="handleDragDropEvent(event)" />
<input type="text"
ondragenter="handleDragDropEvent(event)"
ondragover="handleDragDropEvent(event)"
ondragleave="handleDragDropEvent(event)"
ondrop="handleDragDropEvent(event)" />
</p>
<P><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p>
</body>
</html>
The Output is Shown Here:
Try dragging the text from the left textbox to the right one.
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
USERNAME VALIDATION USING JAVASCRIPT
Username validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.name.value;
if(a=="")
{
alert("Please Enter Your Name");
document.form.name.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Your Name:</td>
<td><input type="text" name="name""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Username Validation allows only Characters.
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.name.value;
if(a=="")
{
alert("Please Enter Your Name");
document.form.name.focus();
return false;
}
if(!isNaN(a))
{
alert("Please Enter Only Characters");
document.form.name.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Your Name:</td>
<td><input type="text" name="name""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Username Validation allows only Limited Characters.
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.name.value;
if(a=="")
{
alert("Please Enter Your Name");
document.form.name.focus();
return false;
}
if(!isNaN(a))
{
alert("Please Enter Only Characters");
document.form.name.select();
return false;
}
if ((a.length < 5) || (a.length > 15))
{
alert("Your Character must be 5 to 15 Character");
document.form.name.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Your Name:</td>
<td><input type="text" name="name""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
PASSWORD VALIDATION USING JAVASCRIPT
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> password:</td>
<td><input type="text" name="pass""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Password Validation (Hiding Your password)
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Password:</td>
<td><input type="password" name="pass""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Password Validation allows only Limited Characters or integers.
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
if ((a.length < 4) || (a.length > 8))
{
alert("Your Password must be 4 to 8 Character");
document.form.pass.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Passsword:</td>
<td><input type="password" name="pass""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
EMAIL VALIDATION USING JAVASCRIPT
Email validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.email.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.email.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Email:</td>
<td><input type="text" name="email""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Email Validation (Email filter /@\ and /.\)
Example
<html>
<head>
<script type="text/javascript">
function ValidateContactForm()
{
var email = document.ContactForm.Email;
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
}
</script></head>
<body>
<form name="ContactForm" method="post" onsubmit="return ValidateContactForm();">
<tr>
<td> Email:</td>
<td><input type="text" name="Email""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Email Validation (Email filter /@\ and /.\)
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
var b=emailfilter.test(document.form2.mailid.value);
if(b==false)
{
alert("Please Enter a valid Mail ID");
document.form2.mailid.focus();
return false;
}
}
</script></head>
<body>
<form name="form2" method="post" onsubmit="return validat()">
<tr>
<td> Email-ID:</td>
<td><input type="text" name="mailid"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
PHONE NUMBER VALIDATION USING JAVASCRIPT
Phone validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("Please Enter Your Phone Number");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Phone:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Phoneno Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Phone Number(Like : 044-42046569)");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Phone No:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
MOBILE NUMBER VALIDATION USING JAVASCRIPT
Mobile validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("Please Enter Your Mobile Number");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Mobile:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Mobile Number Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.form.phone.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Mobile No:</td>
<td><input type="text" name="phone""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Mobileno Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.form.phone.focus();
return false;
}
if((a.length < 1) || (a.length > 10))
{
alert(" Your Mobile Number must be 1 to 10 Integers");
document.form.phone.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Mobile No:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
ADDRESS AND TEXTAREA VALIDATION USING JAVASCRIPT
Textarea validation:
Example
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.address.value;
if(a=="")
{
alert("Please Enter Your Details Here");
document.form.address.focus();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return validation()">
<tr>
<td> Address:</td>
<td><textarea name="address" cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Textarea Validation
Example
<html>
<head>
<script type="text/javascript">
function Validation()
{
var a = document.form.address.value;
if(a=="")
{
alert("please Enter the details");
document.form.address.focus();
return false;
}
if((a.length < 20) || (a.length > 100))
{
alert(" Your textarea must be 20 to 100 characters");
document.form.address.select();
return false;
}
}
</script></head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td> Address:</td>
<td><textarea name="address" cols="60" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
RADIO BUTTON VALIDATION USING JAVASCRIPT
RadioButton validation:
Example
<html>
<head>
<script LANGUAGE="JavaScript">
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script></head>
<body>
<form name="feedback" action="#" method=post>
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form>
</body>
</html>
The Output is Shown Here:
Your Gender: Male Female
RadioButton Validation
Example
<html>
<head>
<script type="text/javascript">
function checkButton(){
if(document.form1.button1.checked == true){
alert("Box1 is checked");
} else if(document.form1.button2.checked == true){
alert("Box 2 is checked");
}
}
</script></head>
<body>
<form name="form1">
<input type="radio" name=button1>Box 1
<br> <input type="radio" name=button2 CHECKED>Box 2
<br> <INPUT type="button" value="Get Checked" onClick='checkButton()'>
</form>
</body>
</html>
The Output is Shown Here:
Box 1
Box 2
RadioButton Validation
Example
<html>
<head>
<script type="text/javascript">
function evalGroup()
{
var group = document.radioForm.myRadio;
for (var i=0; i<group.length; i++) {
if (group[i].checked)
break;
}
if (i==group.length)
return alert("No radio button is checked");
alert("Radio Button " + (i+1) + " is checked.");
}
</script></head>
<body>
<form name="radioForm">
Radio Button 1: <input type="radio" name="myRadio" /><br />
Radio Button 2: <input type="radio" name="myRadio" /><br />
Radio Button 3: <input type="radio" name="myRadio" /><br />
Radio Button 4: <input type="radio" name="myRadio" /><br /><br />
<input type="button" value="Eval Group" onclick="evalGroup()" />
</form>
</body>
</html>
The Output is Shown Here:
Radio Button 1:
Radio Button 2:
Radio Button 3:
Radio Button 4:
CHECKBOX VALIDATION USING JAVASCRIPT
Checkbox validation:
Example
<html>
<head>
<script LANGUAGE="JavaScript">
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script></head>
<body>
<form name="feedback" action="#" method=post>
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="checkbox" name="gender" value="Female"> Female
<input type="checkbox" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form>
</body>
</html>
The Output is Shown Here:
Your Gender: Male Female
Checkbox Validation
Example
<html>
<head>
<script type="text/javascript">
function checkButton(){
if(document.form1.button1.checked == true){
alert("Box1 is checked");
} else if(document.form1.button2.checked == true){
alert("Box 2 is checked");
}
}
</script></head>
<body>
<form name="form1">
<input type="chechbox" name=button1>Box 1
<br> <input type="chechbox" name=button2 CHECKED>Box 2
<br> <INPUT type="button" value="Get Checked" onClick='checkButton()'>
</form>
</body>
</html>
The Output is Shown Here:
Box 1
Box 2
Checkbox Validation
Example
<html>
<head>
<script type="text/javascript">
function evalGroup()
{
var group = document.radioForm.myRadio;
for (var i=0; i<group.length; i++) {
if (group[i].checked)
break;
}
if (i==group.length)
return alert("No Checkbox is checked");
alert("Radio Button " + (i+1) + " is checked.");
}
</script></head>
<body>
<form name="radioForm">
Checkbox 1: <input type="chechbox" name="myRadio" /><br />
Chechbox 2: <input type="chechbox" name="myRadio" /><br />
Chechbox 3: <input type="chechbox" name="myRadio" /><br />
Chechbox 4: <input type="chechbox" name="myRadio" /><br /><br />
<input type="button" value="Eval Group" onclick="evalGroup()" />
</form>
</body>
</html>
The Output is Shown Here:
chechbox 1:
chechbox 2:
chechbox 3:
chechbox 4:
Checkbox Validation
Example
<html>
<head>
<script type="text/javascript">
var myFlag = false
function initValue() {
myFlag = document.forms[0].sizes[0].checked;
}
function sh(form) {
for (var i = 0; i < form.sizes.length; i++) {
if (form.sizes[i].checked) {
break;
}
}
alert(form.sizes[i].value);
}
function setmyFlag(setting) {
myFlag = setting;
}
function exitMsg() {
if (myFlag) {
alert("exit message.");
}
}
</script> </head>
<body>
<form >
<input type="checkbox" name="sizes" value="1" checked="checked" onclick="setmyFlag(true)" />1
<input type="checkbox" name="sizes" value="2" onclick="setmyFlag(false)" />2
<input type="checkbox" name="sizes" value="7" onclick="setmyFlag(false)" /&g <input type="checkbox" name="sizes" value="5" onclick="setmyFlag(false)" />5
t;5
<input type="button" name="Viewer" value="View" onclick="sh(this.form)" />
</form>
</body>
</html>
The Output is Shown Here:
1 2 7 5
SELECT INDEX VALIDATION USING JAVASCRIPT
Select Index validation:
Example
<html>
<head>
<script LANGUAGE="JavaScript">
function validation()
{
if(document.login.type.selectedIndex==0)
{ alert("Please select your member type");
document.login.type.focus();
return false;
}
return true;
}
</script></head>
<body>
<form name="login" method="post" action="#" onsubmit="return validation();">
<select name="type" class="texta1">
<option name="sel" value="Selected">Select Type</option>
<option name="fr" value="Freshers">Freshers</option>
<option name="ex" value="Experienced">Experienced</option>
<option name="un" value="Under_Studying">Under_Studying</option>
</select>
</form>
</body>
</html>
The Output is Shown Here:
Drog and Drop Validation
Example
<html>
<head>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += oEvent.type + "\n";
</script></head>
<body>
<P>Try dragging the text from the left textbox to the right one.</p>
<P>
<input type="text" value="drag this text"
ondragstart="handleDragDropEvent(event)"
ondrag="handleDragDropEvent(event)"
ondragend="handleDragDropEvent(event)" />
<input type="text"
ondragenter="handleDragDropEvent(event)"
ondragover="handleDragDropEvent(event)"
ondragleave="handleDragDropEvent(event)"
ondrop="handleDragDropEvent(event)" />
</p>
<P><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p>
</body>
</html>
The Output is Shown Here:
Try dragging the text from the left textbox to the right one.
