Not Allow SUBMIT until REQUIRED FIELDS are completed

[ceeandcee]

Good Afternoon,

I am looking to create a page where I can enter data into a form and use INSERT to enter into the database. In the code example below, I have shown only 3 fields, but my page will have 13 fields and I want to designate 8 of them as "required"....meaning that you CANNOT hit Submit until those 8 fields are completed. What's happening now is you can enter a few and if you hit enter by mistake, I am getting partial db entries. any help would be appreciated. my code is below.

<center>
<font face="arial" size="5" color="ffffff"><b>Create a New Listing</b>
</center>



<form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>"> 

<center><table width="600" border="1" cellspacing="0" cellpadding="1" bgcolor="ffffff">
<tr> 
<td width="100" align="center" bgcolor="000000"><font face="arial" size="2" color="ffffff"><b>Field</b></td>
<td width="100" align="center" bgcolor="000000"><font face="arial" size="2" color="ffffff"><b>Format</b></td>
<td width="400" align="center" bgcolor="000000"><font face="arial" size="2" color="ffffff"><b>Values</b></td>
</tr>


<tr><td width="100" bgcolor="FFFFFF" align="center"><font face="arial" size="2" color="000000">MLS#</td>
<td width="100" bgcolor="CCCCCC" align="center"><font face="arial" size="1" color="000000">A1234</td>	
<td width="400" bgcolor="CCCCCC" align="left"><font face="arial" size="2" color="000000">
<input type="text" align="left" size="10" name="MLS"></td></tr>
	
<tr><td width="100" bgcolor="FFFFFF" align="center"><font face="arial" size="2" color="000000">Price</td> 
<td width="100" bgcolor="CCCCCC" align="center"><font face="arial" size="1" color="000000">150000</td>	
<td width="400" bgcolor="CCCCCC" align="left"><font face="arial" size="2" color="000000">
<input type="text" align="left" size="10" name="Price"></td></tr>

<tr><td width="100" bgcolor="FFFFFF" align="center"><font face="arial" size="2" color="000000">Address</td> 
<td width="100" bgcolor="CCCCCC" align="center"><font face="arial" size="1" color="000000">1234 Fatima</td>	
<td width="400" bgcolor="CCCCCC" align="left"><font face="arial" size="2" color="000000">
<input type="text" align="left" size="60" name="Address"></td></tr>	

</table>

<input type="submit" name="Submit" value="Submit">
</form>

<?php

$connect = mysql_connect("localhost", "****", "*****") or die(mysql_error());
if (!$connect)
  {
  die('Could not connect: ' . mysql_error());
  }
  
 mysql_select_db("gunndb", $connect);
 
$insert="INSERT INTO listings (MLS, Price, Address)
VALUES
('$_POST[MLS]','$_POST[Price]','$_POST[Address]')";
 

if (!mysql_query($insert,$connect))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";


echo "<table width='500' border='1' cellspacing='0' cellpadding='1' bgcolor='ffffff'>";
echo "<tr> 
<td width='100' align='center' bgcolor='000000'><font face='arial' size='2' color='ffffff'><b>Field</b></td>
<td width='400' align='center' bgcolor='000000'><font face='arial' size='2' color='ffffff'><b>Value</b></td>
</tr>"; 

echo "<tr>
<td width='100' align='center' bgcolor='ffffff'><font face='arial' size='2' color='000000'><b>MLS#</b></td>
<td width='400' align='center' bgcolor='ffffff'><font face='arial' size='2' color='000000'><b>$_POST[MLS]</b></td>
</tr>"; 

echo "<tr>
<td width='100' align='center' bgcolor='ffffff'><font face='arial' size='2' color='000000'><b>Price</b></td>
<td width='400' align='center' bgcolor='ffffff'><font face='arial' size='2' color='000000'><b>$_POST[Price]</b></td>
</tr>"; 

echo "<tr>
<td width='100' align='center' bgcolor='ffffff'><font face='arial' size='2' color='000000'><b>Address</b></td>
<td width='400' align='center' bgcolor='ffffff'><font face='arial' size='2' color='000000'><b>$_POST[Address]</b></td>
</tr>"; 

echo "</table>";

mysql_close($connect)

?>

[quasipickle]

The solution here should be two-fold:

1) When a user clicks the submit button, run some javascript to check that all your required elements have a value. If not, output a message to the user. This is mostly done as a convenience to the user - so they don't have to wait for a page load to find out they messed up.

2) In PHP code, check each required element before running the query. If the required elements aren't set, output something informing the user.

You don't need client-side (Javascript) checking, but it's nice. You DO need server-side (PHP) checking though - just to be certain only valid data is being entered.

[ceeandcee]

Thanks. Any help on how to do this?

[quasipickle]

Server side:

something like:

if(!strlen($_POST['MLS']) || !strlen($_POST['Price']) || !strlen($_POST['Address'])
{
  echo 'Please enter all information';
}

Of course, you can just set a string variable instead, and echo that variable later in your page where necessary

Client side:
I'd recommend using a Javascript library to help with this - if for no other reason than to make the cross-browser stuff easier. I personally use jQuery, so my example will use that:

Note: I'm assuming you've given a class of "required" to each required field. Your code doesn't have this, but it's the easiest way to target the fields you want to be required

var empty = false;

//find all "input" elements with the class of "required".  The each() function iterates through the returned elements, running the anonymous function on each of them.
$("input.required").each(function(){

    //$(this) = the current input element
    if($(this).val().length == 0)
        empty = true;
});

if(empty)
    alert('Please enter all provided fields');

Also, you should really, REALLY look into updating your html code. <font> has been deprecated for quite a while, and you should be putting all your styles in a CSS stylesheet, rather than inline like that.

[epicrevolt]

Have you tried validation through PHP? PHP can check if fields are left blank and display error messages on the page to make it look more professional.
First things first, make all your post data from the form into variables (for ease of use).

$name = $_POST['name'];
$address = $_POST['address'];
$phone = $_POST['phone'];

Next you should strip slashes and tags to help thwart hackers.

$name = stripslashes($name); 
$address = stripslashes($address); 
$phone = stripslashes($phone); 
	 
$name = strip_tags($name);
$address = strip_tags($address);
$phone = strip_tags($phone);

(Of course you can do more validating emails, addresses, and phone numbers, but that is a lot of validation)

Next, check if the fields are blank. If they are blank, then pass that onto an error variable. Lets say you want the name and address only.

if ((!name) || (!address)) {
$errorMsg = 'Please make sure you have filled in the required fields:<br /><br />';
    if (!$name) {
        $errorMsg = 'Please fill in your Name<br />';
        }
    if (!$address) {
        $errorMsg = 'Please fill in your Address<br />';
	}
}

Now that you have checked if everything is filled in, lets connect to the database and fill in the info. Your database connection details should be in a separate file for easy updating.

// Connect to database
include_once "scripts/dbconnect.php";

Let's start placing the data in. You should always use the real escape string for added protection.

$name = mysql_real_escape_string($name);
$address = mysql_real_escape_string($address);
$phone = mysql_real_escape_string($phone);

mysql_query("INSERT INTO people (name, address, phone) 
VALUES('$name','$address','$phone')  
or die (mysql_error());

After submission, the page will just refresh, you should create a success page :)

That's how the data is validated and placed into the database. Now you are left wondering how the form should look, that's easy. Keep in mind that all this code is executed on one page called form.php.
Also notice that you can place the error message on the page too.

<?php
	if ($errorMsg) {
	    print "$errorMsg";
	    }
	?>
<form action="form.php" method="post" enctype="multipart/form-data">
	<table class="center" border="0">
	  <tr>
		<td class="right">Name</td>
		<td><input type="text" name="name" id="name" maxlength="20" value="<?php print "$name"; ?>" />
		</td>
	  </tr>
	  <tr>
		<td class="right">Address</td>
		<td><input type="text" name="address" id="address" maxlength="48" value="<?php print "$address"; ?>" />
		</td>
	  </tr>
	  <tr>
		<td class="right">Phone Number</td>
		<td><input type="text" name="phone" id="phone" maxlength="10" /></td>
	  </tr>
	  <tr>
		<td class="center" colspan="2"><input type="submit" value="Submit" /></td>
	  </tr>
	</table>
</form>

Now, if we put all this together, it should look like this.

<?php
$name = $_POST['name'];
$address = $_POST['address'];
$phone = $_POST['phone'];

$name = stripslashes($name); 
$address = stripslashes($address); 
$phone = stripslashes($phone); 
	 
$name = strip_tags($name);
$address = strip_tags($address);
$phone = strip_tags($phone);

if ((!name) || (!address)) {
$errorMsg = 'Please make sure you have filled in the required fields:<br /><br />';
    if (!$name) {
        $errorMsg = 'Please fill in your Name<br />';
        }
    if (!$address) {
        $errorMsg = 'Please fill in your Address<br />';
	}
}

// Connect to database
include_once "scripts/dbconnect.php";

$name = mysql_real_escape_string($name);
$address = mysql_real_escape_string($address);
$phone = mysql_real_escape_string($phone);

mysql_query("INSERT INTO people (name, address, phone) 
VALUES('$name','$address','$phone')  
or die (mysql_error());
?>
<html>
<head><title>People Form</title></head>
<body>
	<?php
	if ($errorMsg) {
	    print "$errorMsg";
	    }
	?>
<form action="form.php" method="post" enctype="multipart/form-data">
	<table class="center" border="0">
	  <tr>
		<td class="right">Name</td>
		<td><input type="text" name="name" id="name" maxlength="20" value="<?php print "$name"; ?>" />
		</td>
	  </tr>
	  <tr>
		<td class="right">Address</td>
		<td><input type="text" name="address" id="address" maxlength="48" value="<?php print "$address"; ?>" />
		</td>
	  </tr>
	  <tr>
		<td class="right">Phone Number</td>
		<td><input type="text" name="phone" id="phone" maxlength="10" /></td>
	  </tr>
	  <tr>
		<td class="center" colspan="2"><input type="submit" value="Submit" /></td>
	  </tr>
	</table>
</form>
</body>
</html>

Tell me if that helps :)