Wednesday, 10 April 2013


JAVASCRIPT VALIDATION


 » Introduction
 » Username Validation
 » Password Validation
 » Email Validation
 » Phone Validation
 » Mobile Validation
 » Address Validation
 » Radion button
 » CheckBox
 » Select Index
"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 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>
The Output is Shown Here:
  UserName:
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>

The Output is Shown Here:
  UserName:
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>

The Output is Shown Here:
  UserName:
PASSWORD VALIDATION USING JAVASCRIPT          
Password validation:

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>
The Output is Shown Here:
  Password:
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>

The Output is Shown Here:
  Password:
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>

The Output is Shown Here:
  Password:
 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>
The Output is Shown Here:
  Email-ID:
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>

The Output is Shown Here:
  Email:
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>

The Output is Shown Here:
  Email:
 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>
The Output is Shown Here:
  Phone No:
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>

The Output is Shown Here:
  Phone No:
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>
The Output is Shown Here:
  Mobile No:
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>

The Output is Shown Here:
  Mobile No:
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>

The Output is Shown Here:
  Mobile No:
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>
The Output is Shown Here:
  Address:
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>

The Output is Shown Here:
  Address:
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.

Posted by at

1 comment:

Subscribe to: Post Comments (Atom)