Form Validation using javascript in joomla
- by Ankur
I want to use form validation. I have used javascript for this and I have downloaded the com_php0.1alpha-J15.tar component for writing php code but the blank entries are goes to the database.
Please guide me...
sample code is here...
<script language="javascript" type="text/javascript">
function Validation()
{
if(document.getElementById("name").value=="")
{
document.getElementById("nameerr").innerHTML="Enter Name";
document.getElementById("name").style.backgroundColor = "yellow";
}
else
{
document.getElementById("nameerr").innerHTML="";
document.getElementById("name").style.backgroundColor = "White";
}
if(document.getElementById("email").value=="")
{
document.getElementById("emailerr").innerHTML="Enter Email";
document.getElementById("email").style.backgroundColor = "yellow";
}
else
{
document.getElementById("emailerr").innerHTML="";
document.getElementById("email").style.backgroundColor = "White";
}
if(document.getElementById("phone").value=="")
{
document.getElementById("phoneerr").innerHTML="Enter Contact No";
document.getElementById("phone").style.backgroundColor = "yellow";
}
else
{
document.getElementById("phoneerr").innerHTML="";
document.getElementById("phone").style.backgroundColor = "White";
}
if(document.getElementById("society").value=="")
{
document.getElementById("societyerr").innerHTML="Enter Society";
document.getElementById("society").style.backgroundColor = "yellow";
}
else
{
document.getElementById("societyerr").innerHTML="";
document.getElementById("society").style.backgroundColor = "White";
}
if(document.getElementById("occupation").value=="")
{
document.getElementById("occupationerr").innerHTML="Enter Occupation";
document.getElementById("occupation").style.backgroundColor = "yellow";
}
else
{
document.getElementById("occupationerr").innerHTML="";
document.getElementById("occupation").style.backgroundColor = "White";
}
if(document.getElementById("feedback").value=="")
{
document.getElementById("feedbackerr").innerHTML="Enter Feedback";
document.getElementById("feedback").style.backgroundColor = "yellow";
}
else
{
document.getElementById("feedbackerr").innerHTML="";
document.getElementById("feedback").style.backgroundColor = "White";
}
if(document.getElementById("name").value=="" || document.getElementById("email").value==""
|| document.getElementById("phone").value=="" || document.getElementById("society").value==""
|| document.getElementById("occupation").value=="" || document.getElementById("feedback").value=="")
return false;
else
return true;
}
</script>
<?php
if(isset($_POST['submit']))
{
$conn = mysql_connect('localhost','root','');
mysql_select_db('society_f',$conn);
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$society = $_POST['society'];
$occupation = $_POST['occupation'];
$feedback = $_POST['feedback'];
$qry = "insert into feedback values(null". ",'" . $name . "','" . $email . "','" . $phone . "','" . $society . "','" . $occupation . "','" . $feedback . "')" ;
$res = mysql_query($qry);
if(!$res)
{
echo "Could not run a query" . mysql_error();
exit();
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.td{
background-color:#FFFFFF;
color:#000066;
width:100px;
}
.text{
border:1px solid #0033FF;
color:#000000;
}
</style>
</head>
<body>
<form id="form1" method="post">
<input type="hidden" name="check" value="post"/>
<table border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3" style="text-align:center;"><span style="font-size:24px;color:#000066;">Feedback Form</span></td>
</tr>
<tr>
<td class="td">Name</td>
<td><input type="text" id="name" name="name" class="text" ></td>
<td style="font-style:italic;color:#FF0000;" id="nameerr"></td>
</tr>
<tr>
<td class="td">E-mail</td>
<td><input type="text" id="Email" name="Email" class="text"></td>
<td style="font-style:italic;color:#FF0000;" id="emailerr"></td>
</tr>
<tr>
<td class="td">Contact No</td>
<td><input type="text" id="Phone" name="Phone" maxlength="15" class="text"></td>
<td style="font-style:italic;color:#FF0000;" id="Phoneerr"></td>
</tr>
<tr>
<td class="td">Your Society</td>
<td><input type="text" id="society" name="society" class="text"></td>
<td style="font-style:italic;color:#FF0000;" id="societyerr"></td>
</tr>
<tr>
<td class="td">Occupation</td>
<td><input type="text" id="occupation" name="occupation" class="text"></td>
<td style="font-style:italic;color:#FF0000;" id="occupationerr"></td>
</tr>
<tr>
<td class="td">Feedback</td>
<td><textarea name="feedback" id="feedback" class="text"></textarea></td>
<td style="font-style:italic;color:#FF0000;" id="feedbackerr"></td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">
<input type="submit" value="Submit" id="submit" onClick="Validation();" />
<input type="reset" value="Reset" onClick="Resetme();" />
</td>
</tr>
</table>
</form>
</body>
</html>
