Applying validations for each field and displaying error next to each field!

saravanataee · February 19, 2013

Hi there,

I am having the following ad posting page. But i m really confused of applying a input validation. I just want to display error when there is any field which left unfilled. Error should be displayed near the field.

In case of email i want to show whether the email is already available in the database or not. if available i will show available. if not available then i will show the same.

All the validations should happen when i click submit button. If everything is filled, then the submit button should take me to next page.

Can anyone help me with this.

I m terrible in search for it.

my code:

<?php
include("conndb.php");
function createoptions($table , $id , $field)
{
   $sql = "select * from $table ORDER BY $field";
   $res = mysql_query($sql) or die(mysql_error());
   while ($a = mysql_fetch_assoc($res))
       echo "<option value=\"{$a[$id]}\">$a[$field]</option>";
}


?>

<!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>Post a Free Ad</title>

<link href="loginmodule.css" rel="stylesheet" type="text/css" />


<style>
#entrydt1 {
   margin-left: 100px;
}

#orderid1 {
   margin-left: 107px;
}

#orderdt1 {
   margin-left: 94px;
}

#itemid {
   margin-left: 142px;
}

#qtyid {
   margin-left: 122px;
}

#packid {
   margin-left: 120px;
}

#qtynoid {
   margin-left: 80px;
}

#Poid {
   margin-left: 80px;
}

#resetid {
   margin-left: 80px;
}

#clearid {
   margin-left: 80px;
}

#Name {
   margin-left: 50px;
   width: 100px;
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">

	    $(function(){
	    $("select#MRP").change(function(){
	        var qty = $('#subcat2').val();
	        var MRP = $('#MRP').val();
               var t7 = $('#t7').val();
               var total = (qty * (MRP*(t7/100)));
               $("#amount").val(total);
	    })
	    })

	    $(function(){
		  $("select#category").change(function(){
		    $.getJSON("select.php",{category: $(this).val(), ajax: 'true'}, function(j){
			  var options = '';
			  for (var i = 0; i < j.length; i++) {
			    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			  }
			  $("select#subcategory").html(options);
		    })
		  })


		  $("select#subcategory").change(function(){
		    $.getJSON("select.php",{subcategory: $(this).val(), ajax: 'true'}, function(j){
			  var options = '';
			  for (var i = 0; i < j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                   //options = '<input type="text" id="subcat2" name="subcat2" value="' + j[i].optionDisplay + '" />';
			  }
			  /*$("select#subcategory2").html(options);*/
		    })
		  })

	    })

             $(function(){
		  $("select#category").change(function(){
		    $.getJSON("select.php",{category: $(this).val(), ajax: 'true'}, function(j){
			  var options = '';
			  for (var i = 0; i < j.length; i++) {
			    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			  }
			  $("select#subcategory").html(options);
		    })
		  })


		  $("select#subcategory").change(function(){
		    $.getJSON("select.php",{subcategory: $(this).val(), ajax: 'true'}, function(j){
			  var options = '';
			  for (var i = 0; i < j.length; i++) {
				 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                   //options = '<input type="text" id="subcat2" name="subcat2" value="' + j[i].optionDisplay + '" />';
			  }
		    ("select#subcategory2").html(options);
		    })
		  })

	    })
	    </script>

</script>
</head>
<body>
   <h1>Post a Free Ad</h1>
   <form method="post" name="form" action="preview.php">

   <table border='0'>

           <tr>
               <td><label for="name">Enter the name of the product or service you want</label></td>
               <td> <input type="text" name="ad" size=20 value=""/></td>
               </tr>
               <tr>
               <td> Select your Category</td>
               <td><select name="cat" id="category" style="width:11em;">
                       <option value="-1">--Select--</option>
                       <?php
                       createoptions("category", "cat_id", "category");
                       ?>
               </select>
               </td>
               </tr>
               <tr>
               <td> Select Subcategory </td>
               <td><select name="subcat" id="subcategory" style="width:11em;">
               </select>
               </td>
               </tr>
               <tr>
               <td>Ad Type </td>
               <td><input type="radio" name="adtype" value="I Am Offering">I Am Offering
               <input type="radio" name="adtype" value="I Am Looking For">I Am Looking For
               </td>
               </tr>
               <tr>
               <td>Ad Title <font color="red">*</font></td>
               <td><input type="text" name="title" value="" style="width:15em;"></td>
               </tr>
               <tr>
               <td>Location<font color="red">*</font></td>
               <td><input type="text" name="location" value="" style="width:15em;"></td>
               </tr>
               <tr>
               <td>Addtional Details</td>
               <td><textarea name="info" rows="5" cols="50"></textarea></td>
               </tr>
               <tr>
<td> <font face="arial" color="green" size="5"/> Verification Details here!! </td>
</tr>                
               <tr>
               <td>Email </td>
               <td><input type="text" name="email" value="" style="width:15em;" / >
               </td>
               </tr>
               <tr>
               <td>Mobile </td>
               <td><input type="text" name="mobile" value="" style="width:15em;" / >
               </td>
               </tr>


<td> <input type="submit" name="submit" value="Preview Ur Ad"/></td>
</tr>                




       </table>


       <br /> <br />

   </form>

</body>
</html>

Sign In

Applying validations for each field and displaying error next to each field!

Recommended Posts

saravanataee

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information