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

Join the conversation

Browse

Activity

Important Information