JAVA FOR ALL: 06/18/11

Form Validation using Java Script?

>> Saturday, June 18, 2011

                                                                  FORM VALIDATION
               THE Form is shown below and we are writing validation for this form

<HTML>
<HEAD>
        <TITLE>Comment Form</TITLE>
<Script language = javascript>

function Validate() {
Message = ""
Message = Message + CheckName()
Message = Message + CheckEmail()
Message = Message + CheckComments()
Message = Message + CheckLikes()
Message = Message + CheckHates()

if (Message == "") {
return true
}
else {
alert(Message)
return false
}

}


function CheckName() {
UserName = document.f1.Name.value

if (UserName == "") {
Message = "Something's wrong with your name" + "\n"
}
else {
Message = ""
}
return Message

}

function CheckEmail() {
email = document.f1.Email.value
AtPos = email.indexOf("@")
StopPos = email.lastIndexOf(".")
Message = ""

if (email == "") {
Message = "Not a valid Email address" + "\n"
return Message
}

if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address" + "\n"
return Message
}

if (StopPos < AtPos) {
Message = "Not a valid email address" + "\n"
return Message
}

if (StopPos - AtPos == 1) {
Message = "Not a valid email address" + "\n"
return Message
} 


}


function CheckComments() {
 comments = document.f1.Comments.value

 if (comments == "Add Your Comments here") {
  Message = "No Comments added" + "\n"
 }
 else {
  Message = ""
 }

 return Message

}

function CheckLikes() {
boxes = document.f1.Liked.length
txt = ""
for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
txt = txt + document.f1.Liked[i].value + " "
}
}


if (txt == "") {
Message = "No Likes Boxes ticked" + "\n"
}
else {
Message = ""
}

return Message


}


function CheckHates() {
boxes = document.f1.Hated.length
txt = ""
for (i = 0; i < boxes; i++) {
 if (document.f1.Hated[i].checked) {
  txt = txt + document.f1.Hated[i].value + " "
 }
}

if (txt == "") {
 Message = "No Hate Boxes ticked" + "\n"
}

else {
 Message = ""
}

return Message

}



</script>
</HEAD>
<BODY BGCOLOR = White>
<form name="f1" method="post" action="" onSubmit="return Validate()" enctype = text/plain>
  <table width="672" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="142" valign="top" rowspan="4">&nbsp;</td>
      <td valign="top" height="45" colspan="4" align="center"> <b>Name:</b> 
        <input type="text" name="Name" size="30">
      </td>
    </tr>
    <tr> 
      <td height="40" valign="top" colspan="4" align="center"><b>Email: 
        <input type="text" name="Email" size="30">
        </b></td>
    </tr>
    <tr> 
      <td height="151" valign="top" colspan="4" align="center"> 
        <textarea name="Comments" cols="40" rows="7">Add Your Comments here</textarea>
      </td>
    </tr>
    <tr> 
      <td height="150" valign="top" colspan="2">&nbsp;</td>
      <td valign="top" width="240"> <b>What did you like about the Site?</b> 
        <p> 
          <input type="checkbox" name="Liked" value="Cool Layout">
          Cool Layout</p>
        <p> 
          <input type="checkbox"name="Liked" value="Easy to Navigaten">
          Easy to Navigate</p>
        <p> 
          <input type="checkbox" name="Liked" value="Great Contents">
          Great Contents</p>
      </td>
      <td width="240" valign="top"> <b>What did you hate about the site?</b> 
        <p> 
          <input type="checkbox" name="Hated" value="Awful Layou">
          Awful Layout</p>
        <p> 
          <input type="checkbox" name="Hated" value="Difficult to Navigate">
          Difficult to Navigate</p>
        <p> 
          <input type="checkbox" name="Hated" value="Lousy Contents">
          Lousy Contents</p>
      </td>
    </tr>
    <tr align="center"> 
      <td height="80" colspan="2" valign="top">&nbsp;</td>
      <td valign="top" colspan="3"> 
        <input type="submit" name="Submit" value="Submit This Form">
        <input type="reset" name="Submit2" value="Reset This Form">
      </td>
    </tr>
    <tr> 
      <td height="0"></td>
      <td width="40"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr> 
      <td height="1"></td>
      <td></td>
      <td width="10"></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</form>
</BODY>
</HTML>

If we doesn't provide proper data the the output looks like below

JavaScript Validation for DropDown Menu List?

Drop Down List Validation
When click the submit button The image is shown below

The code is shown below:

<HTML><HEAD>
<TITLE>Dropdown Validation</TITLE>

<SCRIPT LANGUAGE="JavaScript"'>
<!--

function validateForm(thisform){
if(document.ItemList.drpDown.selectedIndex==0)
{
alert("Please select an Item.");
document.ItemList.drpDown.focus();

}
return false;
}

//-->
</SCRIPT>
</HEAD>

<BODY>
Please choose an item from the drop down menu:

<form name="ItemList" method="post" action="/bhaskar">
<table width="100%" border="0">
<tr>
<td width="135">Choose a username: </td>
<td>
<select name="drpDown">
<option value selected>-- SELECT --</option>
<option value>Apples</option>
<option value>Oranges</option>
</select>
<input type="submit" name="Submit" onclick="validateForm(ItemList);return false;" value="Submit" >
</td></tr></table></form>
</BODY>
</HTML>

If we doesn't select any Drop down menu the output is shown in below image

JavaScript validation for Radio Buttons?

RADIO BUTTON VALIDATION

<html>
<title>RadioButtons Validation</title>
<head>
<script type="text/javascript">

function valbutton(thisform) {
// place any other field validations that you require here
// validate myradiobuttons
myOption = 0;
for (i=thisform.myradiobutton.length-1; i > 0; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i; i = 0;
}
}
if (myOption == 0) {
alert("You must select a radio button");
return false;
}
// place any other field validations that you require here
//thisform.submit(); // this line submits the form after validation
} 
  
</script>
</head>
<body>
<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
<input type="reset" name="reset" value="Clear" />
</form> 
</body>
</html>

JAVA FOR ALL

Linkbar

Form Validation using Java Script?

>> Saturday, June 18, 2011

JavaScript Validation for DropDown Menu List?

JavaScript validation for Radio Buttons?

FaceBook Login

INTERVIEW QUESTIONS AND ANSWERS

Search This Blog

Subscribe via email

Label

Tags

Blog Archive

Popular Posts

Followers

image

LIST of FAVORITES

Feedjit

HTML/JAVASCRIPT

HTML/JAVASCRIPT

Total Pageviews

STATCOUNTER

Footer